Question

我正在为我的网站和SEO优化编写元数据服务，似乎我无法克服错误。我不知道为什么。我将html控制器标签插入头标签中 ng-controller="MetaDataCtrl"。我是Angular的初学者，而且我正在从在线教程中学习。

中找到了此代码

Main.js

    var app = angular.module('WebApp', [
      'ngRoute'
    ]);
      angular.module("WebApp").service("metadataService" ["$location",              "$rootScope", function($location, $routescope) {
     var self = this;
     self.tags = {};

// Set custom options or use provided fallback (default) options
self.loadMetadata = function loadMetadata(metadata) {
   metadata = metadata || {};
   metadata.title = metadata.title || 'BNL Consulting';
   metadata.description = metadata.description || 'We are BNL Consulting.';
   document.title = metadata.title;
   self.tags = metadata;
};

// Make sure data gets reloaded when navigation occurs
$rootScope.$on('$routeChangeSuccess', function (event, newroute, oldroute) {
   self.loadMetadata(newroute.metadata);
});
}
]),

    /**
     * Configure the Routes
     */
    app.config(['$routeProvider', '$locationProvider', function($routes, $location) {
     $location.html5Mode(true).hashPrefix('!');
      $routes
        // Home
        .when("/", {templateUrl: "partials/home.html",  
          controller: "PageCtrl",
          metadata: {
               title: 'This is my title',
               description: 'This is Desc.' }

        })
    }]);

    app.controller('PageCtrl', function (/* $scope, $location, $http */) {

    });

    .controller('MetadataCtrl', function ($scope, metadataService) {
       $scope.meta = metadataService;
    });

Answer 1

这是正确的代码，如您链接的文章（here）所示。我写了这篇文章，它为我无缝地工作。这还包括硬编码的后备标记，以防抓取工具无法获取Javascript。

注意：这些不是完整的文件，只是相关文件的重要部分。如果您需要帮助编写可在其他地方找到的指令，服务等的样板文件。无论如何，这里... ...

<强> app.js

您可以在此处为每条路线（标题，说明等）提供自定义元数据

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/portfolio', {
       templateUrl: 'views/portfolio.html',
       controller: 'PortfolioCtrl',
       metadata: {
           title: 'The Portfolio Page Title',
           description: 'The Portfolio Page Description' }
   })

metadata-service.js （服务）

设置自定义元数据选项或使用默认值作为后备。

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js （指令）

打包视图的元数据服务结果。

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

<强>的index.html

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

Answer 2

我相信这是因为你的标签在头标签上，这似乎是一个特例。我相信您的问题将由this回答。

Answer 3

我解决了这个问题，我想与其他用户分享。我尝试这种方式基于SEO优化的文章，但它没有工作谷歌机器人仍然看到{{meta.tags.title}}而不是一些动态文本。我没有以正确的方式编写我的服务，因此当我编写ng-controller时错误会不断弹出。如果你的服务工作正常，那么angularJs标签没有问题

app.service("metadataService", ['$rootScope', function($rootScope) {
    var self = this;
    self.tags = {};

    // Set custom options or use provided fallback (default) options
    self.loadMetadata = function loadMetadata(metadata) {
        metadata = metadata || {};
        metadata.title = metadata.title || 'Meta Data ';
        metadata.description = metadata.description || 'DESCRIPTION';
        metadata.keywords = metadata.keywords || 'Some, Key, Words' ;
        document.title = metadata.title;
        self.tags = metadata;
    }
    ;

    // Make sure data gets reloaded when navigation occurs
    $rootScope.$on('$routeChangeSuccess', function(event, newroute, oldroute) {
        self.loadMetadata(newroute.metadata);
    }
    );

}
])

角度元数据服务[$ injector：unpr]

3 个答案: