SEO - Single Page Websites

In this article, we will see how to optimized the ranking of your single page application. Today, the single page website development is really common. It exists a lot of frameworks to create single page website like AngularJS, BackboneJS...

But the problem when you try to index your website in Google or Bing, just the html page will be index. That means just 1 entry with only 1 title and description. It is not really good  if your website is composed of many pages.

Adapt your webapp

Google provides a solution to crawl the dynamically created content :

• Don't use only the # as Hash fragment, replace it by #!
• Google will replace the hash fragment with exclamation mark by _escaped_fragment_
• http://www.exemple.com/#toto => http://www.example.com/#!toto
• Url GoogleBot : http://www.example.com/?_escaped_fragment_=toto
• Add a trigger to the head of the HTML of a page
• <meta name="fragment" content="!">

Now Google or Bing will be able to crawl all the page of your website.  The next step is to return the html page or content for the good hash fragment.

Adapt your Backend

If you use NodeJs to host you webapp my suggestion is to read this good post : Easily index your SPA thanks to PhantomJS

In my case, I could not use this trick because my single page app is hosted on Apache and I can not install external tools...

So my solution is to use the .htaccess to create a redirection on pre-render pages. To pre-render a page you can use PhantomJS or an other tools to create a html file for each page. 

You can create an automatic script to generate these pages. Also you can modify the title and the description meta tag for each page.
After create a folder seo/ on your server, hosted all your html pages on it. 

.htaccess

Create the .htaccess file in your root folder, with this following content :

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$

RewriteRule ^(.*)$ seo/%1.html [NC,L]

</IfModule>

This code means if the url contains _escaped_fragment_=, we redirect the call to the prerender html page.

The html must have the same name of your hash fragment toto.html in my previous example.

You can test your rule with the "Fetch as Google" in Crawl menu on Google Webmaster Tool.

Now Google, Bing and the other can index all the pages of your single page application!!!

Sources : Google specification Ajax Crawling

Glassware - Media Gallery v0.1

In this topic, I propose a Glassware to manage your photos and video.

You can view, play and delete your photos and video directly with this app with swipe,swipe and swipe in your Timeline. And you can not find the picture or the video you want in the middle of your notifications.

It's a beta version, but I publish it because I read a lot of comments on the glass-community forum that it is not easy to manage the picture on the timeline.

I agree with all these comments, that's why I decided to develop this Glassware during my free-time.

Actual features :

• Display pictures/ videos
• Play/Stop video
• Delete pictures/videos
• Swipe back/forward to navigate
• Tap to show the menu

The next features I want to add are :

• Look & Feel : Add icon to know if it's photo or video
• Feature : 
• Add informations about the media itself
• Send a picture by email

You can download the application here : Media Gallery 0.1

To install, you need to have the ADT Bundle installed on your computer. More informations available here.

And run the command : adb install GalleryPicture.0.1.apk
adb tool is available on sdk/platform_tools/

Let me know if you need other features, or if you have any comments or concerns about this Glassware.

Screenshot

Enjoy it!