How to make a dynamic meta description in angularjs?

Question

How to make a dynamic meta description in angularjs?

Navigation

#1 by (1 votes)
#2 by (-1 votes)

4

How to do for description , which is in Array in controller , is rendered to <meta name="description" content="{{metadescription}}"> , which is in index.html, and can appear dynamically in views?

I use $ routeParams; when I put: title: ':pageName' title is replaced by the current route, when accessing the page. I would like to do something like metadescription , by making the description that is inside the Array items in the controller NatureCtrl appear in the views.

Controller

angular.module('tareasApp')
  .controller('NatureCtrl', function ($scope, $routeParams, $sce, $location, $anchorScroll) { 

    $scope.pageName = $routeParams.pageName;

$scope.items =[
 {    
      href:'/relaxing-sounds-waves', 
      img:'waves.jpg', 
      descricao:'Those Relaxing Sounds of Waves'
 },
 {    
      href:'/relaxing-ocean-sounds', 
      img:'ocean.jpg', 
      descricao:'Nature Sounds Relaxing Ocean Sounds'
 }
];
 });

app.js

    var myApp = angular.module('tareasApp')
      myApp.config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
          .when('/:pageName', {
                    templateUrl: 'views/wizard.html',
                    title: ':pageName',
                    metadescription: 'Aqui precisa ir algo que faça a ligação entre a descricao, que está no controller NatureCtrl, a metadescription que está na index.html e seja dinamicamente inserido nas views',
                    controller: 'NatureCtrl'
                })
                .otherwise({
                  redirectTo: '/'
                });
            });

// Dessa forma consigo obter os títulos das páginas baseado na route e routeParams. Como configurar a $rootScope.metadescription para obter a descrição referente a cada páginas?
myApp.run(['$location', '$rootScope', '$routeParams', function($location, $rootScope, $routeParams) {
   $rootScope.$on('$routeChangeSuccess', function (event, current) {
   var title = current.$$route.title;
if (title && $routeParams){
    for(var PageName in $routeParams) {
        title = title.replace(new RegExp(':' + PageName, 'g'), $routeParams[PageName]);
    }
}
$rootScope.title = title;
$rootScope.metadescription = current.$$route.metadescription;
     });
 }]);

Page index.html

<!DOCTYPE html>
<html lang="pt-BR" ng-app="tareasApp">
<head>
<meta charset="utf-8">
<title ng-bind="title"></title>
<meta name="description" content="{{metadescription}}">
<base href="/">
<meta name="fragment" content="!">
</head>

<body>
   Conteúdo vai aqui.....
</body>
</html>

javascript angularjs seo route

asked by anonymous 04.05.2015 / 05:12

2 answers

How to align text in a "mobile" menu using the "select" tag maven configuration [closed]

score 1 · Answer 1

You can use the Angular-Update-Meta module . With it, you just call each page the <update-meta name="description" content="A descrição da nova página aqui"></update-meta> tag.

In addition to this module, you can also dynamically update the title, among other meta tags.

score -1 · Answer 2

<html ng-app="app">
<title ng-bind="metaservice.metaTitle()">Test</title>
<meta name="description" content="{{ metaservice.metaDescription() }}" />
<meta name="keywords" content="{{ metaservice.metaKeywords() }}" />


<script>
var app = angular.module('app',[]);
app.service('MetaService', function() {
   var title = 'Test';
   var metaDescription = '';
   var metaKeywords = '';
   return {
      set: function(newTitle, newMetaDescription, newKeywords) {
          metaKeywords = newKeywords;
          metaDescription = newMetaDescription;
          title = newTitle; 
      },
      metaTitle: function(){ return title; } 
      metaDescription: function() { return metaDescription; },
      metaKeywords: function() { return metaKeywords; }
   }
});

app.controller('myCtrl',function($scope,$rootScope,MetaService){
   $rootSCope.metaservice = MetaService;
   $rootScope.metaservice.set("Test","desc","blah blah");
});
 </script>
 <body ng-controller="myCtrl"></body>


</html>