close
  menu      DavidRodenas
CONTACT  

Adds full SEO support to AngularJS single page applications without requiring any external service or server support.


<html ng-app="yourApp" ng-strict-di>
    <head>
        <title>Your basic title</title>
        <meta name="description" content="Your basic description.">
        <meta name="keywords" content="your,basic,keywords">
        <meta name="fragment" content="!">
    </head>
    <body>
        <header><a href="#!/posts">Posts</a></header>
        <ng-view>
            ...
        </ng-view>
    </body>
</html>

Motivation

Make AngularJS SPA apps crawable by Google.

<amp-img src=” layout=”responsive”></amp-img>

AnuglarJS single page applications are mostly running in the browser. When a crawler asks for the page it receives a practically blank page with few scripts.

Most crawlers ignore those scripts and does not executes them. It makes impossible to index and have SEO of the contents.

Advanced crawlers like Google are able to execute scripts, but, unfortunately they do not know how to find pages and get all available contents.

Fortunately this problem exists for a long time, and Google and other crawlers created a standard to find and retrieve the information of virtual pages generated with Javascript.

This library relays in such mechanisms and allows to crawlers to find all virtual pages generated by Javascript. In conclusion: it adds SEO capabilities.

Example

Example

<html ng-app="yourApp" ng-strict-di>
    <head>
        <title>Your basic title</title>
        <meta name="description" content="Your basic description.">
        <meta name="keywords" content="your,basic,keywords">
        <meta name="fragment" content="!">
    </head>
    <body>
        <header><a href="#!/posts">Posts</a></header>
        <ng-view>
            ...
        </ng-view>
    </body>
</html>
$routeProvider.when('/posts', {
    controller: PostsController,
    controllerAs: 'vm',
    resolve: {
        posts: 'PostsResolver',
    },
    templateUrl: 'posts.tpl.html',
    title: 'My Web - Posts list',
    description: 'An awesome list of my posts',
    keywords: 'awesome,posts,myweb,mytheme,cool',
});
$routeProvider.when('/posts/:postId', {
    controller: PostController,
    controllerAs: 'vm',
    resolve: {
        post: 'PostResolver',
    },
    templateUrl: 'post.tpl.html',
    title: '{{original}} - {{post.title}}',
    description: '{{post.description}}',
    keywords: '{{post.tags.join(",")}},awesome,myweb,post,{{postId}}',
});

Setup

See https://github.com/drpicox/drpx-seo#how-to-setup to learn how to do the full setup.


«  drpx-id