如何在angularjs网站上添加推特卡片？
如何在angularjs网站上添加推特卡片？
提问于 2015-07-29 21:41:27
我的网站是用angularjs搭建的。我将在博客中的每个帖子中添加社交媒体共享链接。如何为每个博客页面添加meta标签，以便当用户发布帖子url时，该帖子的标题、描述和图片会出现在他们的tweet中？
回答 1
Stack Overflow用户
发布于 2016-04-05 03:46:06
我正在使用：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();
});in index.html inside 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 )。
休息，如果你想要额外的推特内容，如播放器等，那么请阅读twitter developer docs。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31702184
复制相关文章
相似问题
腾讯云开发者
