Question

我正在尝试为我的网站实施动态搜索引擎优化，其中涉及某些网页的动态Meta描述。我已尝试了多种方法来显示Meta描述，但无济于事;我会在控制台的元素视图中看到相同的结果：

Empty description screenshot

1）通过控制器设置元描述

HTML：

<html lang="en" ng-controller="GlobalController">
    <head>
        <meta name="fragment" content="!">
        <meta name="description" content="{{metaDescription}}">
    </head>
    <body>
        etc...
    </body>
</html>

GlobalController

$scope.metaDescription = 'test description'; // Doesn't show in html
console.log($scope.metaDescription); // shows in console

2）使用$rootScope

HTML：

<meta name="description" content="{{metaDescription}}">

控制器：

$rootScope.metaDescription = 'test description';  // Doesn't show in html
console.log($rootScope.metaDescription); // shows in console

3）使用服务（基于https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html）

HTML：

<meta name="description" content="{{ SEO.metaDescription() }}">

服务：

angular.module('core').service('SEO', function() {
    var metaDescription = '';
    var metaKeywords = '';
    return {
        metaDescription: function() { return metaDescription; },
        metaKeywords: function() { return metaKeywords; },
        reset: function() {
            metaDescription = '';
            metaKeywords = '';
        },
        setMetaDescription: function(newMetaDescription) {
            metaDescription = newMetaDescription;
        },
        appendMetaKeywords: function(newKeywords) {
            for (var key in newKeywords) {
                if (metaKeywords === '') {
                    metaKeywords += newKeywords[key].name;
                } else {
                    metaKeywords += ', ' + newKeywords[key].name;
                }
            }
        }
    };
});

控制器：

SEO.setMetaDescription('here is a test description'); // Doesn't show in html
console.log(SEO.metaDescription()); // shows in console

有人可以请我指出可能的问题和解决方案吗？

Answer 1

如果您直接在$ routeProvider中编写描述，则可能设置如下：

App.js

myApp.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {
        title: 'Home page',
        metaDescription: 'description of page home',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
       })
       .otherwise({
            redirectTo: '/'
        });
  }); 

     myApp.run(['$location', '$rootScope', function( $location, $rootScope, ) {
           $rootScope.$on('$routeChangeSuccess', function (event, current) {

        $rootScope.metaDescription = current.$$route.metaDescription;
             });
         }]);

的index.html

<meta name="description" content="{{metaDescription}}">

请注意。写入以便在页面编入索引后，Google的抓取工具可以看到它们。

angularjs动态元描述拒绝出现

1 个答案: