SEO


For modern dynamic websites, it is difficult for Google to properly index your page. Blitline has a screenshot functionality which allows us to render your webpage, not only as an image, but additionally we can output the final generated HTML. You can choose to save this HTML out, and then point Google to the pre-rendered pages, so that it can properly index your website.


NOTE: Webkit Only. Sorry, NO IE or Firefox :(


You can redirect search engines to your static HTML pages instead of the dynamic ones.


This example assumes your site is built following the conventions of Google’s recommendation for searchable ajax.


1 - Generate Static Pages


The first thing you need to do is to generate your static pages. You can do this by following the instructions here or see the example below.


You will need to do this for all possible navigation options on your website. (ie. every #! url).


Recommendation:


If you page is www.myexamplesite.com/#!seattle/hotels we recommend you save them into an S3 bucket (or Azure container) with the key of seattle/hotels


Example:

{
  "application_id": "YOUR_APP_ID",
  "src" : "www.myexamplesite.com/#!seattle/hotels",
  "src_type" : "screen_shot_url",
  "src_data" : {
       "viewport" : "1200x800",
       "save_html" : {
           "s3_destination" : {
               "bucket" : "my_s3_bucket",
               "key" : "seattle/hotels"
           }
       }
  "functions" :
  [{
     "name": "no_op"
  }]
}


NOTE: You must replace YOUR_APP_ID, my_s3_bucket, myexamplesite.com, and the example keys with your OWN related resources.


2 - Update your reverse proxy


Now that you have your static pages generated, you need to make sure the search engines look in the right spot for them.


If your followed Google’s recommendation for searchable ajax, search engines will covert the ‘#!’ in the url into the parameter ‘_escaped_fragment=’


So, now when a bot comes to look for a url with:

http://www.myexamplesite.com?_escaped_fragment=seattle/hotels

it will redirect it to the cached static HTML version we stored on S3.


Nginx


To make Nginx redirect to your static pages, simple add the following snippet to your nginx.conf file within the “server” section.


if ($args ~ "_escaped_fragment_=(.+)") {
  set $real_url $1;
  rewrite ^ http://my_s3_bucket/$real_url;
}


Apache


To make Apache redirect to your static pages, change your .htaccess file to have the following.


RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteRule ^(.*)$  http://my_s3_bucket/$1 [P,QSA,L]
Alternative Site-Map Option


You could also submit an XML document to Google Webmaster Tools with a list of your rendered pages, as outlined in this document http://ajax.rswebanalytics.com/seo-for-ajax/#!sitemap_for_ajax_pages


Pages without hash fragments


According to the Google spec, “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="!">


Please read more about this Googlebot feature here: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started


Cost?


Unless you are runnning SEO dumps every day, or you have a massive site, you probably won’t even need a paid account here at Blitline. We think many of you can probably get by on the FREE developer account. Try it… what have you got to lose?


Enjoy