Question

我的网站是使用angularjs构建的。我将为博客中的每个帖子添加社交媒体共享链接。如何为每个博客页面添加元标记，以便当用户发布帖子网址时，帖子的标题，描述和图像会显示在他们的推文中？

Answer 1

我正在使用：https://github.com/AvraamMavridis/angular-metatags库，这是我的例子：

var myApp = angular.module('myApp', ['ngRoute','metatags']);

在配置中注入MetaTagsProvider并定义元标记

myApp.config(['$routeProvider','MetaTagsProvider', function($routeProvider, MetaTagsProvider) {
        MetaTagsProvider
          .when('/', {
            title: 'Great',
            description: 'Cool',
            twitter_card: 'summary_large_image'
            twitter_title: 'My title',
            twitter_site: 'My site name' ,
            twitter_domain: 'example.com'
            twitter_url: 'http://example.com/example-page.html',
            twitter_desc: 'Cool website',
            twitter_image: 'http://example.com/images/an_image.jpg'
          })
          .........
    }]);

然后在你的rootScope中定义元标记：

$rootScope.metatags =  { 
  title: "A Great article on angularJS",
  description:"",
  twitter_title: "A Great article on angularJS", 
  twitter_desc: "A Great article on angularJS which describe etc etc blah blah", 
  twitter_site: "example.com",
  twitter_image: "http://example.com/images/an_image.jpg"
}

然后在您的应用程序中初始化提供程序，如：

myApp.run(function(MetaTags){
    MetaTags.initialize();
});

在head.html里面的head部分添加以下行：

<meta ng-if="metatags.twitter_card !=''" property="twitter:card" content="{{metatags.twitter_card}}">
    <meta ng-if="metatags.twitter_site !=''" property="twitter:site" content="{{metatags.twitter_site}}">
    <meta ng-if="metatags.twitter_domain !=''" name="twitter:domain" content="{{metatags.twitter_domain}}">
    <meta ng-if="metatags.twitter_title !=''" property="twitter:title" content="{{metatags.twitter_title}}">
    <meta ng-if="metatags.twitter_desc !=''" property="twitter:description" content="{{metatags.twitter_desc}}">
    <meta ng-if="metatags.twitter_image !=''" property="twitter:image" content="{{metatags.twitter_image}}">

这将有效，但请记住，只有当你使用像prerender.io或prerender这样的服务时才能使用redis很好的教程（因为twitter bot需要预先翻译你的页面的HTML）：http://www.doz.com/search-engine/angularjs-index-seo

休息，如果你想要额外的推特内容，如播放器等，然后阅读twitter developer docs。

如何将twitter卡添加到angularjs网站？

1 个答案: