skip to Main Content

I am planning to change meta Title,Meta keywords and Meta description dynamically using AngularJS 1.x to reflect in Facebook,Twitter,Google Plus and LinkedIn.

Is there any way to change dynamically? I am using REST Api calls.

Thanks,
-Venkat

4

Answers


  1. Use Angular-update-meta , it will help you to update meta tags dynamically.

    https://github.com/jvandemo/angular-update-meta

    Login or Signup to reply.
  2. You can use ng-bind to dynamically create the content of any tag.

    For example:

    <title ng-bind="pageTitle()"></title>
    

    And then in your controller:

    $scope.pageTitle = function () {
        return 'the page title you want to add dynamically';
    };
    

    Google now renders javascript so the dynamic page title, and meta tags, will be indexed correctly.

    Login or Signup to reply.
  3. I also ran into this problem so I’ve created a library just for this. You can view it over here.

    You can use it in two ways:

    1. For each state you’ve defined using ui-router you can attach the following custom data: simpleSeoTitle, simpleSeoDescription, simpleSeoKeywords. These 3, whenever the state is active, will change the page’s title, description, or keywords.

    2. It also exposes a service called simpleSeoService. This service has 3 properties, title,description, andkeywords`. These 3 are defined as getter and setter. These are useful when you have dynamic properties you want to attach.

    Login or Signup to reply.
  4. I would recommend you to use this library which is suggested by Tristan also. It works perfectly fine. and compatible with dynamic expressions also.

    For updating meta-tags you can simply use the following markup in your view(s):

    <update-title title="A new title"></update-title>
    <update-meta charset="ISO-8859-1"></update-meta>
    <update-meta http-equiv="Content-Language" content="es"></update-meta>
    <update-meta name="description" content="A page specific description"></update-meta>
    <update-meta property="og:title" content="Minions"></update-meta>
    <update-meta itemprop="description" content="A page specific itemprop description"></update-meta>
    

    You can simply install it using this command:

    bower install angular-update-meta
    

    Hope it will help someone.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search