Making AngularJS SEO Friendly

Posted By Weston Ganger

I have read all over the internet that SEO and AJAX sites is a real pain. But finally I came across an article saying that Google's bots now read full javascript.

To enable it you will only have to make one small change in your app configuration. Just turn on html5Mode.

.service('Meta', function() {
  var metaDescription = '';
  var metaKeywords = '';
  return {
    metaDescription: function() { return metaDescription; },
    metaKeywords: function() { return metaKeywords; },
    reset: function() {
      metaDescription = '';
      metaKeywords = '';
    },
    setMetaDescription: function(newMetaDescription) {
      metaDescription = newMetaDescription;
    },
    appendMetaKeywords: function(newKeywords) {
      for (var key in newKeywords) {
        if (metaKeywords === '') {
          metaKeywords += newKeywords[key].name;
        } else {
          metaKeywords += ', ' + newKeywords[key].name;
        }
      }
    }
  };
});

Now we can edit the page header like so:

<pre>
<code class="language-markup">
<title ng-bind="PageTitle.title()"></title>

<meta name="description" content="{{ Meta.metaDescription() }}">
<meta name="keywords" content="{{ Meta.metaKeywords() }}">



Related External Links:

- [Weluse - AngularJS SEO finally a piece of cake](https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html)

Article Topic:Software Development - Javascript

Date:July 23, 2015