AngularJS Single page app with dynamic meta – AngularJS SEO

AngularJS Single page app with dynamic meta – AngularJS SEO

Welcome to the In live24u.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.

Dynamic meta tags for your Angular single page application. Update meta tags based on the current route/state of your app. Supports ui-router and ngRoute

ngMeta is available for download on Bower and NPM. You can also download the source/minified JS file from GitHub

Also Read :   VueJS Filters : vuejs filter array Object json String Example




Step 1 : Simple Download ngMeta click Link

        bower install --save ngMeta //save here libs

Check out the Download section for other alternat download options (NPM file, JS file here below)

  • Bower
    bower install –save ngMeta
  • npm
    npm install –save ng-meta
  • CDN
    https://cdnjs.cloudflare.com/ajax/libs/ng-meta/1.0.0/ngMeta.min.js
    

Stpe 2 : Simple Add ‘ngMeta’ directives as a project dependency in AngularJS

        angular.module('live24uApp', [....,'ngMeta']);

Stpe 3 : Add All the meta tags to your app.js / main.js routes/states

  angular.module('live24uApp', [....,'ngRoute','ngMeta'])
        .config(function($routeProvider) {
          $routeProvider
          .when('/', {
            templateUrl: 'views/home.html',
            controller: 'wayHomeCtrl',
            data: {
              meta: {
                'title': 'Home page - live24u.com',
                'description': 'Dynamic meta tags in your Angular SPA'
              }
            }
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'wayAboutCtrl',
            data: {
              meta: {
                'title': 'About Us - live24u.com',
                'description': 'Dynamic meta tags in your Angular SPA'
              }
            }
          })
          ...
        });

Stpe 4 :Initialize ngMeta using the run block

 angular.module('live24uApp', [....,'ngMeta'])
        .config(function(...) {
          ...
		  //your all routeProvider codes
        })
        .run(function(ngMeta) {
          ngMeta.init();
		  //init function all call
        });

Example

Also Read :   Angular 2 – Two Ways to Initialize Component Properties

Stpe 5 :Use meta tags in your HTML file

<head>
        <title>{{ngMeta.title}}</title>
        <meta property="og:title" content="{{ngMeta.title}}" />
        <meta property="og:description" content="{{ngMeta.description}}" />
</head>





Example

   

Add a Comment

Your email address will not be published.