jquery-pjax
jquery-pjax copied to clipboard
defunkt
Update <meta> and <link> tags on PJAX requests and popstate
An HTML document has at least four components:
- visible contents (
<body>) - properties (
<meta>,<title>,<!doctype>, some<link>tags) - resources (
<link rel="stylesheet">,<link rel=”icon”>,<img />, ...) - behavior or program logic (
<script>)
PJAX should take care of all these aspects. PJAX main goal is to speed up browsing the web site by loading only the different/missing parts of the document and reusing the loaded ones.
At each PJAX request the following should happen with each of the documents' components:
- Only a piece of
<body>is loaded from server and replaced into the document at the corresponding position. - Some properties of the document are common to the hole web site, but some (like
<title>and some<meta>) are specific to each document/uri. If server is “aware” of PJAX and serves document specific meta information in PJAX responses, PJAX (JS part) should replace this meta information in the document, correspondingly. - Some resources are located in
<head>, some in the<body>of the document. The browser takes care of<body>resources automatically when the corresponding html code is inserted into<body>by PJAX. Resources from<head>should be managed by PJAX JS.<link rel="stylesheet">is an exception and should be managed by JS application (not PJAX), cause it also “contains” program logic (visibility, positioning, transitions etc.) and loading CSS files at PJAX request is against main goal of PJAX (CSS load would occur after PJAX response received and thus CSS loading should start before PJAX request and hopefully will end just before PJAX inserts new contents into the page). - Websites’ program logic is a complex part. PJAX itself is part of websites’ program logic. So, i think PJAX only needs to have a good API to interact with the web application, but is not responsible of loading and running any code on server requests or history state changes outside explicit API interactions.
Can you explain why would I want to update any meta tags? The title tag is obviously updated because it changes the browser window/tabs title, but the metas? AFAIK meta tags do not change how the page is rendered.
@acasademont I think he is considering things like facebook open graph meta tags, canonical url, base href etc....
and also things like
<meta name="viewport" content="width=device-width, initial-scale=1">
that can be a thing that changes page zooming on mobile (behaivor and initial rendering)
yeah sure but why would you need to have these updated via pjax? Anybody directly accessing that url (google bot, facebook crawler) should be rendered the full layout with the meta tags. What can a user do with the updated metatags in his/her window? Why do you need the updated canonical meta? The user doesn't need this and google bot does not use javascript/pjax at all when crawling.
Yes the facebook open graph bot sees it correctly, but i've to check if a default fb:like plugin without an href paramenter uses the meta og:url or the location.href to set itself pointing at the right url to init the share operation that involves also fb servers and if url is not cached in fb open graph also the fb bots (but what url is passed to the fb server? maybe location.href so we're ok but i've to check)...
(for instance imagine you wanna have a like button loaded only once (facebook api plugin are very slow in loading!) e.g. a "share this article" like button in a fixed sidebar of a pjax powered news site....)
Anyway i will experiment this very soon i will report here the behaivor (i've to do that site :) )
But also a more common case: when the pjaxed html content contains a <fb:like> without an href param to be parsed.... it think it uses location.href to set itself up, but maybe if it find an existing and wrong meta og:url this overrides location.href
anyway that's just my doubt... i've to test
@duzun what was your case for meta and pjax?
I implemented PJAX on these websites: https://limitlesslane.com/, www.casadelux.ru/#googtrans(|en)
For example, Twetter reads he meta description tag dynamically if the description is not specified in the button tag. For now, i need this for Tweeter and VK.com at least.
For that project I also use some other third party tools (like Google analytics and others) that work purely on JS and i don't know how they work internally, so to be sure that in present and in future everything will work properly, i have to be sure that all the document (contents and properties like meta) are updated at PJAX request. This way i don't have to take care of document properties in my JS code. There are a lot of other open services delivered via JS (like Google Translate) that may relay on meta information.
One more thing, in the past i had a navigation system based on <link rel="next"> and <link rel="prev"> tags, working in JS, one more reason to update doc properties!
Btw, i still have issues with share buttons if they are not inside the pjax container and don't get rebuilt.
P.S. If you want to see www.casadelux.ru in English, run this in console: DCMS.gTrans('','en')
Fair enough, but why don't you hook on the pjax:success event and do all this work? In that event you have the full contents of the returned response and you can parse it however you please.
I also need meta updated on popstate and i think it is up to PJAX, if server send the meta along with the response.
I also use pjax:start and pjax:end events to finalize and reinitialize all the JS modules on PJAX events. Server also sends some JS variables specific to loaded page (like productID, current_page, etc) via <meta name="jsvars" content="JSON">. This meta is stored in state object by PJAX, and gets interpreted on pjax:end (request or popstate) and everything works perfect.
If PJAX doesn't save meta, JS application would need to save somehow URI specific information, but for me it looks natural if PJAX does that, and JS application may relay on that.
+1 for this. This also took care of refreshing CSRF-token, which used by jquery-ujs(Rails).
I am a little confused on how to get the meta data called from my files, can you please explain this a little more.
I don't quite understand your questuin, Slgoetz. This repo of PJAX just reads meta from the dynamically loaded document (on PJAX requests) and updates metas of DOM with new values.
So if i put a title=''" tag in my element that is being called it updates the title, but how do i update my meta information like my facebook:og meta description for the page
On Tuesday, December 10, 2013, Dumitru Uzun wrote:
I don't quite understand your questuin, Slgoetz. This repo of PJAX just reads meta from the dynamically loaded document (on PJAX requests) and updates meta from DOM with new values.
— Reply to this email directly or view it on GitHubhttps://github.com/defunkt/jquery-pjax/pull/284#issuecomment-30226225 .
The response to PJAX request should be something like:
<html>
<head>
<title>...</title>
<meta name="..." content="..." />
<meta http-equiv="..." content="..." />
<meta property="og:site_name" content="..." />
</head>
<body>
...
</body>
</html>
And also check which PJAX are you using? This pull request was never merged to master repo.
Try this one: https://github.com/duzun/jquery-pjax/blob/master/jquery.pjax.js
Something which I don't think has been considered here is what if the server is only responding with the requested chunk of HTML, for instance a particular div? If you wanted it to give meta too, where in the response would that be?
Actually this has been considered :-) If server is 'aware' of pjax, it could specify the container within the response, like this
add_header("X-PJAX-Container: #my_divs_id")
and the response could be something like:
<html>
<head>
<title>My awesome page</title>
<meta name="description" content="Description of this page" />
</head>
<body>
<div id="my_divs_id">
Some awesome stuff here...
</div>
</body>
This way PJAX would load just #my_divs_id and also update meta description and title of the page.
You can see a live example here: https://limitlesslane.com/ For this website I used a slightly modified version of this repo: https://github.com/duzun/jquery-pjax/blob/master/jquery.pjax.js
I see. Then I'd vote for this feature's inclusion, but I'd advise adding some documentation and rewriting your commits to make it more likely to be accepted -- if you look at the diff it shows you're changing some unrelated things (for instance the default timeout, formatting, whitespace, boilerplate).
I know this is an issue from my side :-| By the time I added these features I didn't know much about git. In the original pjax repo the formatting is a little annoying. I did not intended to put my version on github.
Anyways I'll review the code and pull it again.
Thanks!
What is the current status of this? I am working on an experimental blog using NancyFx and pJax. http://bilgewater.co.uk/ I need each page to have it's own decription and keywords. But since I am using pjax to load the content and set the url I can't work out how to make this happen without a page refresh. SEO is critical here. Pjax seems to set the
We're working on a new version of pjax library that might have built-in support for <meta> and <link> tags. Currently users are required to handle these tags manually on a per-app basis using pjax lifecycle events.
@GusBeare Just have your server render appropriate <meta name=description> tags statically and that will take care of SEO. Search engine crawlers like googlebot don't execute JavaScript, so they won't use pjax on your site at all. Pjax can't screw up your SEO.
Also, don't bother with <meta name=keywords> for SEO. It's likely that its contents are completely ignored by modern search engine crawlers.
At 2015-02-10 16:10:13 -0800, Mislav Marohnić wrote:
@GusBeare Just have your server render appropriate
<meta name=description>tags statically and that will take care of SEO. Search engine crawlers like googlebot don't execute JavaScript, so they won't use pjax on your site at all. Pjax can't screw up your SEO.
My use case for having these meta tags updated was that I found it nice to have certain social actions, for instance hitting a Pinterest "pin" button, work by scooping up the values in the meta tags on the current page. But that fell down when they're not updated after switching pages via pjax.
@mislav "...Search engine crawlers like googlebot don't execute JavaScript, so they won't use pjax on your site at all. Pjax can't screw up your SEO."
Actually that's not true. As of 2015 Google executes all the JS of your website and indexes everything.
My use case for having these meta tags updated was that I found it nice to have certain social actions, for instance hitting a Pinterest "pin" button, work by scooping up the values in the meta tags on the current page.
That's a legit use case and it's important to have that working properly. We have custom code that handles meta tag switching on GitHub.com by listening to pjax lifecycle events. Right now your only option is to set that up manually, unfortunately.
@duzun: Interesting! Thanks for the correction. I wonder if that means that they trigger "click" events when following links.
thanks for the comments. It's good to hear of a new version of Pjax in dev. And very interesting that Google now executes js!
I was reading this blog below and wondered if the meta description was really that important after all:
http://googlewebmastercentral.blogspot.co.uk/2009/09/google-does-not-use-keywords-meta-tag.html
Q: Does this mean that Google ignores all meta tags? A: No, Google does support several other meta tags. This meta tags page documents more info on several meta tags that we do use. For example, we do sometimes use the "description" meta tag as the text for our search results snippets, as this screenshot shows:
So, they "sometimes" use the description meta tag as the text for snippets. That doesn't sound like it's a big deal if left out. And that post is long out of date.
I am going to keep this experimental blog up for a while and add some real content and see how google indexes it. I don't really want to remove Pjax and revert to page load for every link. Then I can upgrade when the new Pjax comes out.
It is still the case that Google uses the description meta tag for search results snippets.
I think about... would it be good the returned components to be json_encoded? I mean, the whole HTTP response to be json_encoded, not pure HTML as it is now.