AngularJS and SEO – Part 2 – Title and meta description


This is a follow up on AngularJS and SEO – Part 1

Getting your site in the Google and Bing index may be the most important step but you still need to optimize your content for searchability.

e.g. you will have to deal with title tags and meta description for each page in order to rank well.
There is nothing built in for AngularJS to deal with this, so we had to roll our own directives for this.

We do use TypeScript, but you can easily convert this to plain javascript.

module directives {
    class ViewTitleDirective implements ng.IDirective {
        restrict = 'E';
        link($scope, element: JQuery) {
            var text = element.text();
            element.remove();
            $('html head title').text(text);
        }
    }

    class ViewDescriptionDirective implements ng.IDirective {
        restrict = 'E';
        link(scope, element) {
            var text = element.text();
            element.remove();
            $('html head meta[name=description]').attr("content", text);
        }
    }

    app.directive('viewTitle', () => new ViewTitleDirective());
    app.directive('viewDescription', () => new ViewDescriptionDirective());
}

And to use this you simply place a view-title inside one of your view templates, like so:

<view-title>Some page title</view-title>
<view-description>Some page description</view-description>
.. the rest of your ng-view template here

By doing this, you not only set a nice title for your single page app, but you also make the title and description indexed if you use the service in part 1, because the service will capture the dynamic DOM containing the new title and meta description.

HTH

3 thoughts on “AngularJS and SEO – Part 2 – Title and meta description”

  1. Good one Roger, but are you sure that google bot sees the generated content with resolved title and meta description and not the “view-source” of the page which is still the raw content?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s