angularjs动态元描述拒绝显示答案

【问题标题】：angularjs dynamic meta description refuse to show upangularjs动态元描述拒绝显示
【发布时间】：2023-03-27 12:48:01
【问题描述】：

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

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

HTML：

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

全局控制器

$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

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

【问题讨论】：

嗨，你有什么解决办法吗？我正在寻找相同的解决方案。谢谢

标签： angularjs seo

【解决方案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;
             });
         }]);

索引.html

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

注意。在页面被编入索引后，它们对 Google 的抓取工具可见。

【讨论】：