JavaScript - Making SPA SEO-friendly

javascript

// JavaScript - Making your SPA SEO-friendly:

Original URL: www.example.com/ajax.html#key=value
Change it to: www.example.com/ajax.html#!key=value (opt-in)

Google change it to: www.example.com/ajax.html?_escaped_fragment_=key=value

When your server see this "ugly URL" request, you must make sure that it
returns just the relevant HTML content instead of the entire page with just
JavaScript.

If a lot of your content is produced with JavaScript, you may want 
to use a headless browser such as HtmlUnit to obtain the HTML snapshot. 
Alternatively, you can use a different tool such as crawljax or watij.com. If 
much of your content is produced with a server-side technology such as PHP or 
ASP.NET, you can use your existing code and only replace the JavaScript portions 
of your web page with static or server-side created HTML. You can create a 
static version of your pages offline, as is the current practice. For example, 
many applications draw content from a database that is then rendered by the 
browser. Instead, you may create a separate HTML page for each AJAX URL.

In order to make pages without hash fragments crawlable, you include a special 
meta tag in the head of the HTML of your page. The meta tag takes the following 
form: 
<meta name="fragment" content="!">

This indicates to the crawler that it should crawl the ugly version of this URL. 
As per the above agreement, the crawler will temporarily map the pretty URL to 
the corresponding ugly URL. In other words, if you place 
<meta name="fragment" content="!"> into the page www.example.com, the crawler 
will temporarily map this URL to www.example.com?_escaped_fragment_= and will 
request this from your server. Your server should then return the HTML snapshot.
Consider updating your Sitemap to list the new AJAX URLs.  Crawlers use Sitemaps 
to complement their discovery crawl. Your Sitemap should include the version of 
your URLs that you'd prefer to have displayed in search results, so in most cases 
it would be http://example.com/ajax.html#!key=value. Do not include links such 
as http://example.com/ajax.html?_escaped_fragment_=key=value in the Sitemap.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License