布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法”></a>
          </div>
          <article class=

打开图形元标签

你的网站执行开放图形协议吗?如果你的答案是“嗯?”或者“我不这么认为……”,那么你应该继续阅读。

开放图谱

你的品牌,不管是产品、服务还是应用,都需要讲一个故事。和,开放图谱协议是为了让你的用户能够讲述你的故事。要在您的网站上实现open graph协议,非常简单——只需添加至少4个新的元标记到<头>的HTML文件:

  • og:标题
  • og:类型
  • og: url
  • og:形象

这些都很简单。在你的文档中包含这些元标签,可以让你控制标题,链接和图片,当用户在他们的社交账户上分享你的网站时。而不是让Facebook或Twitter来猜测,而是由你来决定展示什么。要指定内容的描述,只需包含og:描述meta标记。下面是一个网站类型的例子:

<财产=og:类型内容=网站/><财产=og: url内容=//www.nxtmastery.com/2013/10/23/os-x-mavericks-and-apache//><财产=og:标题内容=OS X小牛和Apache/><财产=og:形象内容=//www.nxtmastery.com/><财产=og:形象内容=http://uploads.www.nxtmastery.com/wp-content/uploads/2013/10/OS-X-Mavericks-logo.png/><财产=og:形象:宽度内容=200/><财产=og:形象:高度内容=200/><财产=og:图像类型内容=图像/ jpeg/>

默认情况下,我将URL指定为web页面的当前URL,并拉入标题和描述来匹配页面的标题和描述。我还指定了当用户共享内容时包含一个图像。现在让我们看看包括图像。

图片

当指定您的图像时,请确保它足够大(超过200 x 200像素),并且您还指定了图像的MIME类型。此外,如果使用SSL(通过HTTPS)传递映像,还应该指定og:图片:secure_url财产。您还可以选择指定图像的高度和宽度。

<财产=og:形象内容=http://www.example.com/images/open-graph/logo.png/><财产=og:图片:secure_url内容=https://secure.example.com/images/open-graph/logo.png/><财产=og:图像类型内容=/ png图像/><财产=og:形象:宽度内容=1000/><财产=og:形象:高度内容=600/>

注意,您可以包含您认为合适的任意多的图像标记。当用户在他们的社交网络上分享你的内容时,他们通常会根据你提供的图片来选择包含哪些图片。因此,选择最能代表您的站点或品牌的图像,让用户决定使用哪一种图像。

视频和音频

您也可以包括元标签,以描述任何音频或视频,包括在您的网站。这和包含上面的图片一样简单。视频标签与图像标签相同,只需将“video”替换为“image”即可:

  • og:视频
  • og:视频:secure_url
  • og:视频:类型
  • og:视频:宽度
  • og:视频:高度

WordPress插件

如果你在博客或网站上使用WordPress,那么使用open graph协议很容易上手并运行。只是安装WordPress的Facebook插件。默认情况下包含它们。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。