JavaScript - Making SPA SEO-friendly


// JavaScript - Making your SPA SEO-friendly:

Original URL:
Change it to:!key=value (opt-in)

Google change it to:

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

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 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 
<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, the crawler 
will temporarily map this URL to 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!key=value. Do not include links such 
as in the Sitemap.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License