CODEWITHSUNDEEP
javascriptangularjsfacebook
Venkateswarlu Ala
Venkateswarlu Ala

Reputation: 29

how to change Meta Title,Meta Keywords,Meta Description dynamically in AngularJs 1.x?

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

Upvotes: 3

Views: 1097

Answers (4)

Abdul Khalid
Abdul Khalid

Reputation: 174

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.

Upvotes: 1

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

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.

Upvotes: 0

Tristan
Tristan

Reputation: 3321

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.

Upvotes: 0

rejo
rejo

Reputation: 3350

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

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

Upvotes: 0

Related Questions