Angular Dynamic meta tags in the head
I need to insert public meta tags on a specific page in an angular application.
These tags differ depending on the news or video that is on the page.
I tried adding a variable to the root $. This variable will be populated with meta tags when relevant.
Now here's my problem. Once this variable is populated with an HTML string, they do not form part of the head and are instead outputted to the body. I searched the day and couldn't find any viable solutions. Any help would be appreciated
source to share
I've created an Angular module that can be used to define meta tags dynamically using the $ routeProvider route definitions.
angular.module('YourApp','ngMeta')
.config(function ($routeProvider, ngMetaProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home-template.html',
meta: {
//Sets 'Home Page' as the title when /home is open
title: 'Home page',
description: 'This is the description of the home page!'
}
})
.when('/login', {
templateUrl: 'login-template.html',
meta: {
//Sets 'Login Page' as the title when /login is open
title: 'Login page',
description: 'Login to this wonderful website!'
}
})
});
Then you can set meta tags in HTML like so
<title ng-bind="ngMeta.title"></title>
<!-- OR <title>{{ngMeta.title}}</title> -->
<!-- This meta tag can be set using ngMetaProvider -->
<meta property="og:type" content="{{ngMeta.ogType}}" />
<!-- Default locale is en_US -->
<meta property="og:locale" content="{{ngMeta.ogLocale}}" />
<!-- This meta tag changes based on the meta object of each route -->
<!-- or when the setDescription function is called -->
<meta name="description" content="{{ngMeta.description}}" />
To dynamically set title, description and og: image, you can type ngMeta
in your controller
.controller('DemoCtrl', function(ngMeta) {
ngMeta.setTitle('Demo page');
ngMeta.setDescription('This is the description of the demo page');
ngMeta.setOgImgUrl('http://example.com/abc.jpg');
});
Support for other tags and ui-router at work.
source to share
I had a similar problem with Apple Smart App Banner. You can apply similar logic if you are still looking for an answer.
<html ng-app="myNewsApp">`
<head>
<title> myNews </title>
<meta property="og:url" content={{opengraph.urlArgument()}}/>
</head>
I have configured a service that populates urlArgument with the id for this answer and uses it in the page controller.
module.controller('myNewsVideoCtrl', function($scope, $stateParams, $rootScope, openGraph ){
$rootScope.opengraph = openGraph;
$rootScope.opengraph.set("http://www.imdb.com/title/"+$stateParams.videoID);
})
source to share
I want to answer this question again. Infact, whatever you need directive . You have to set all your meta values as an object, for example:{name:'keywords',content:'angularjs, directive,meta'}
If you want to add it to $ rootScope it could be as follows:
$rootScope.metas = [{
name:'description',
content :'AngularJS meta example'
},{
name:'keywords',
content :'AngularJS, metas, example'
},{
charset:'UTF-8'
}];
Then you can use the keys of the objects as an attribute and their value. Repeat the directive and pass all your metas. If you don't need clear html, you can create an empty meta element in javascript and add attributes to it. Then replace the outerHTML directive element with the new outerHTML meta element. You can check this page: Simple Dynamic Meta Tags in AngularJS
source to share