如何将推特卡添加到 angularjs 网站？答案

【问题标题】：How to add twitter card to angularjs website?如何将推特卡添加到 angularjs 网站？
【发布时间】：2015-07-29 13:41:26
【问题描述】：

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

【问题讨论】：

你试过了吗？
我不知道从哪里开始。我不确定以下方法是否有效。页面标题和图像来自数据库。那么，如果我将包含这些内容的范围变量添加到元标记中，它会起作用吗？
以Twitter API开头

标签： javascript angularjs twitter

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

在 index.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 之类的服务时才起作用（因为 twitter bot 需要您页面的预渲染 HTML）：http://www.doz.com/search-engine/angularjs-index-seo

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

【讨论】：