Skip to content

Instantly share code, notes, and snippets.

@BriceShatzer
Last active August 29, 2015 14:15
Show Gist options
  • Save BriceShatzer/395db9fce3414a0e2f6f to your computer and use it in GitHub Desktop.
Save BriceShatzer/395db9fce3414a0e2f6f to your computer and use it in GitHub Desktop.
Angular & SEO

#Angular & SEO It's probably not that big of a deal, but if it is something we want to specifically deal with, the best solution would be to serve a static page (which Laravel is currently creating already creating) anytime a search engine asks in order to prevent an angular rendered page from being shown which has the potential to not be rendered properly/at all.


##Possible ways of pointing to static pages:

###HTML5 routing mode & use nginx to proxy URLS Original Article - The new HTML5 pushState doesn’t work the same way as it modifies the browser's URL and history. To get angular apps to "fool" the search bot, we can add a simple element to the header: <meta name="fragment" content="!">

This tells the Google spider to use the new crawling spec to crawl our site. When it encounters this tag, instead of crawling our site like normal, it will revisit the site using the ?_escaped_fragment_= tag.

This assumes that we’re using HTML5 mode with the $location service:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

With the _escaped_fragment_ in our query string, we can use our backend server to serve static HTML instead of our client-side app.

Now, our backend can detect if the request has the _escaped_fragment_ in the request and and we can serve static HTML back instead of our pure angular app so that the crawler can crawl our site as though it were a static site.

If we're using nginx to serve our angular app, we can add some configuration to serve snapshots of our app if there is an _escaped_fragment_ parameter in the query strings.

...nginx does not require us to enable a module, so we can simply update our configuration to replace the path with the question file instead.

In our nginx configuration file (For instance, /etc/nginx/nginx.conf), ensure your configuration looks like this:

server {
  listen 80;
  server_name example;

  if ($args ~ "_escaped_fragment_=/?(.+)") {
    set $path $1;
    rewrite ^ /snapshots/$path last;
  }

  location / {
    root /web/example/current/;
    # Comment out if using hash urls
    if (!-e $request_filename) {
      rewrite ^(.*)$ /index.html break;
    }
    index index.html;
  }
}

(this assumes that static pages will be served from the path domain.com/snapshots/url)

###Canonical URLS Google Webmaster Tools Help - Generally used to specify the preferred url when multiple urls exist which point to the same page. This is seen most commonly in ecommerce sites which might have multiple different dynamic urls that point to the same page (ie: http://www.example.com/products?category=dresses&color=green,http://example.com/dresses/cocktail?gclid=ABCD,http://www.example.com/dresses/green/greendress.html). This shares generally

A canonical url for a page can be defined within the site map, but the preferred method is to add a link tag within a pages <head>: <link rel="canonical" href="http://blog.example.com/dresses/green-dresses-are-awesome" />

Issues:
-Only specifies the "preferred url" that this page is associated with. It does not actually force any sort of redirection by a search engine crawler, but instead looks to associate the current page with one that actually will have static content.
-The best practice why of implementing it still relies on an element being rendered on the page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment