How to make a dynamic meta descripition in Angularjs?

Asked

Viewed 479 times

4

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

I use $routeParams; when I put: title: ':pageName' the title is replaced by the current route when accessing the page. I would like to do something similar to the metadescription , making the description that’s inside the Array items in the controller NatureCtrl appear in 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

  • I believe you would have to change the statement of your controller next to the tag html to bind the metadescription. You even tried to do that?

  • I tried with $Scope. $Parent.items only that I use other ng-repeat on the index and is giving conflict.

  • What is your intention with this? Search engines don’t run Javascript, so they won’t see this dynamic Description you want to do.

  • After indexing the pages and sending the sitemap on google for developers the title and description single pages are appearing in Google searches (Single pages are the main menu pages; on these I do not use $routeParams) this question I asked refers to making a configuration to adapt the pages of articles, which use $routeParams, to dynamically show the descriptions of each page, when accessing it. The Titles of the articles pages, which use $routeParams, already appear, I would like to adapt the myApp.run to the descriptions.

  • @Diogodoreto actually executes javascript content before parse: http://www.rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/03062014/

2 answers

1

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

Besides that with this module, you can also dynamically update the title, among other metatags.

-1

<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>

Browser other questions tagged javascript angularjs seo route

You are not signed in. Login or sign up in order to post.