如何优化博客图片进行社交分享:打开图表标签简介

我们都有过这样的经历。您已经写了一篇很棒的博客文章，并且在其中添加了一张特色图片来代表这篇文章在社交媒体上、您的博客主页上等等。

然后，你登录你的社交媒体账户，将链接粘贴到一个新帖子中。你已经准备好与你的网络分享了，但是有一个问题。不幸的是，社交网络拉错了缩略图。或者更糟的是，他们根本不拉。

这不仅让人恼火——你就快被搞定了——而且糟糕的缩略图(或没有缩略图)可能会严重影响你的帖子在社交上的表现。图片是社交页面吸引用户的关键，数据显示，它们有助于产生更多的赞、分享和评论。例如,以图片为特征的推文结果是150%的转发．但是图像必须是正确的，而不是你的logo，不是你的号召行动按钮的截取图像，也不是从页面随机抽取的其他图像。

那么，你如何确保你的每个社交网络都能吸引到你想要的图像呢?答案就在一个叫做开放图谱协议．

当你在Facebook、LinkedIn或Twitter card上分享一个网站或一篇文章时，你会注意到这些社交网络会自动将一些信息加入到你的社交帖子中:网站标题、图片、URL和简短描述。这可以通过每个社交网络的开放图形协议实现。

LinkedIn已经采用了Facebook最初开发的相同协议，而Twitter也使用了基于相同约定的自己的开放图形系统——尽管Twitter支持open graph协议(如果你的网站上已经有该协议的话)。还要注意的是，Twitter只会在你使用Twitter卡的时候自动从链接中提取信息，而不是普通的推文。

如何使用开放图形协议

营销人员如果想在社交媒体上发布好看的内容，就需要开放图表(OG)协议。但是每个社交网络从哪里找到这些信息呢?这就是开放图表标签发挥作用的地方。当你把OG标签放在网页的标题部分时，社交网络就能更容易地找到社交帖子的每个部分的正确信息。

如果你的网页代码中没有OG标签，他们就会猜测哪里可以找到正确的信息。通常，他们对标题、URL和描述还行，但他们可能在选择时遇到麻烦正确的的形象。OG的图像标签会告诉社交网络该提取哪张图像。

如果你计划在社交媒体中使用某些网页或博客文章,很少有OG标签可以包括通常在每一页:一个用于网页标题,一个用于你想要显示的图片,一个用于网页的URL,一个用一两句话描述meta描述页面。下面是它们的样子，所有的大写占位符文本表示你需要自定义每个标签的内容，以反映你想要的社交媒体帖子显示的内容。

看到,“噩:……”描述上面每一行元属性的文本?后面的文本是OG标签的标签类别，告诉社交网络你要发布的内容类型在你的网页上。例如，第一个说“噩:标题”因为这个标签指示了标题你想要出现在你的社交媒体帖子顶部的网页。发表一篇博客文章?OG标题标签可能是您文章的标题。

根据你发布的媒体类型——图像、视频、信息图表或只是文本——你可能会发现还需要其他OG标签，以便在你发布内容后进一步定制出现在你的社交媒体feed上的OG。以下是其中一些:

• “噩:形象:宽度”—这个OG标签嵌套在图像标签中，允许您在社交媒体帖子中定义特征图像的特定宽度。
• “噩:形象:高度”这个标签嵌套在image标签中，允许您定义feature image的特定高度。在下一节中，我们将详细讨论每个社交网络的推荐图片大小。
• “噩:文章”这个标签可以让社交网络知道你的帖子是一篇文章，还有一些其他的标签，你可以嵌入在这个标签中，进一步推广你的社交媒体帖子中的文章。
• “噩:文章:作者”这个标签嵌套在文章标签中，允许你在社交媒体帖子中宣传文章的作者(或署名)。
• “噩:音频”—这个标签允许你在社交媒体帖子中推广和描述一个可播放的音频文件。
• “噩:视频”这个标签允许你在社交媒体帖子中推广和描述一个可播放的视频。
• “噩:视频:系列”这个标签嵌套在视频标签中，如果你的视频属于一个更大的视频活动，你可以推广和定义一个视频系列。

还有很多OG标签类别可供您选择．博客、游戏、城市、书籍、公司、酒店和国家都是OGraybet电子竞技标签的类别，你可以使用这些标签定制你的Facebook、Twitter和LinkedIn帖子，以最好地代表你为用户提供的内容。

对于HubraybetappSpot和WordPress用户来说有个好消息:如果你用HubSpot写博客，你的社交网络会自动拉入特色图片——只要确保你指定了一个有特色的图片在你的每一篇博文里。（专业技巧:尝试上传你的特色图片到COS上，宽度至少为610像素，这样在Facebook、Twitter和LinkedIn上看起来更好。虽然LinkedIn的照片尺寸要求图片较小，但COS会自动调整大小。)

如果你使用WordPress，你需要安装这个插件或者像这样的，然后你就可以走了。

最终，这篇文章是给你的，如果你不使用内容管理系统(CMS)，因为您需要为站点上的每个页面手动操作。我们将一步一步地指导您如何手动优化图片的社会发布在前三个社交网络分享内容:Facebook, LinkedIn和Twitter。

Facebook开放图谱

这是一个Facebook链接的帖子看起来像:

为了确保Facebook从你的博客文章中拉出正确的图像到你的Facebook文章中，你需要首先优化Facebook的图像大小，然后添加适当的OG标签到你的网站。

优化Facebook Open Graph的图像大小

要求:脸谱网需要你需要使用至少200 x 200像素的图像。

建议:尽管200 x 200是绝对最小值，Facebook建议使用至少600 x 314像素的图像。为了在高分辨率设备上获得最佳显示效果，该公司建议选择至少1200 x 630像素的图像。raybet电子竞技

图片来源:脸谱网

如果你的图像小于600 x 314像素，它仍然会显示在你的帖子中，但会以缩略图大小显示。所以，如果你的图像包含很多重要的细节，而这些细节在这么小的帧里可能会丢失，那么最好将你的OG图像标签设置为1200 x 630。

添加开放图形标签

如果你的页面是静态的，你没有使用CMS像HubSpot的，您需要手动向您的博客文章所在的每个页面添加OG标记。标签是元数据，所以您需要将它们添加到您的博客文章所在页面的标题部分。(如果你不管理网站上的代码，你需要向网站开发者寻求帮助。)

1.复制下面的meta标签。

<元属性= " og:形象”内容= "http://example.com/picture.jpg" / >

<元属性=“噩:形象:宽度”内容= "1200" / >

<元属性=“噩:形象:高度”内容= "630" / >

2.用所选图像的URL替换占位符文本。

接下来，删除上面用红色突出显示的示例图像URL，以及图像的实际URL。用绿色高亮的高度和宽度数字做同样的操作，用正确的图像尺寸替换它们。记住Facebook对图片尺寸的要求。

3.将生成的代码片段复制到页面的HTML标题部分。

一旦你在步骤1中用自己的内容的图像URL和尺寸填充了代码，打开源代码(通常用这个图标表示:<>)，并将其粘贴到页面的HTML顶部。

4.在Facebook的共享调试器中输入以前共享的网页。

(如果你正在做的网页之前从未发表过，不要担心这个步骤。)

如果你之前发布过没有标签的网页，或者你发布了这个页面，然后意识到你把标签弄乱了，需要调整它们，你需要运行URLFacebook的调试器一旦你做了任何改变。这是因为Facebook缓存了它的共享页面——所以如果你不刷新缓存，缩略图就不会被修正。

就是这样!现在，当你在Facebook上发布文章链接时，Open Graph协议将读取OG:image标签并显示你指向的图像。(了解关于OG标签的标题、描述和更多信息Facebook开发者博客．)

LinkedIn打开图

和Facebook一样，LinkedIn也使用开放图表协议。所以，当你在你的LinkedIn网络上分享一个链接时，LinkedIn会抓取文章的标题、图片和URL，然后使用这些信息来填充你的LinkedIn帖子。(当他们不明确地说他们抓取一个元描述，他们的算法也会把它拉进来。)以下是HubSpot在LinkedIn上发布的一篇文章的例子，页面标题下面显示了meta描述:

为了确保LinkedIn从你的帖子中拉出正确的图片用作缩略图，你需要优化图片的大小，然后添加正确的OG标签到你的网站，就像你在Facebook上做的一样。

优化LinkedIn Open Graph的图像大小

要求:LinkedIn需要缩略图图像至少80 x 150像素，但不大于80 x 110。如果你的图片不符合这些要求，LinkedIn会自动在你的页面上拉出另一张合适尺寸的图片。

推荐:LinkedIn的分享模块有能力推广宽的，矩形的图像，这可以增加你的文章的点击率超过80 x 150缩略图。分享这样一个形象，公司raybet电子竞技建议使用1200 x 627的图像，并尽可能接近1:91:1的长宽比(即矩形，而不是正方形)。

添加开放图形标签

就像在Facebook上一样，如果你的页面是静态的，而且你不使用HubSpot这样的内容管理系统(CMS)，你需要手动添加OG标签到你的博客文章所在的每个页面上。标签是元数据，所以您需要将它们添加到您的博客文章所在页面的标题部分。(再次强调，如果你无法控制网站上的代码，你需要向网站开发者寻求帮助。)

1.复制下面的meta标签。

<元属性= " og:形象”内容= "http://example.com/picture.jpg" / >

<元属性=“噩:形象:宽度”内容= "1200" / >

<元属性=“噩:形象:高度”内容= "627" / >

2.用所选图像的URL替换占位符文本。

接下来，删除上面用红色突出显示的示例图像URL，以及图像的实际URL。用绿色高亮的高度和宽度数字做同样的操作，用正确的图像尺寸替换它们。记住Facebook对图片尺寸的要求。

3.将生成的代码片段复制到页面的HTML标题部分。

一旦你在步骤1中用自己的内容的图像URL和尺寸填充了代码，打开源代码(通常用这个图标表示:<>)，并将其粘贴到页面的HTML顶部。

就是这样!现在，当你在LinkedIn上发布文章链接时，Open Graph Protocol将读取OG:image标签并显示你指向的图像。

如果你打算同时在Facebook和LinkedIn上发布信息，那么注意了

如果你在优化网页的缩略图，你可能会注意到在所需的图像大小上存在冲突:LinkedIn要求你的特色图像不大于180 x 110像素，而Facebook要求你的图像不小于200 x 200像素。

虽然你可以在不超过180 x 110像素的情况下，将推荐图像的大小调整到接近180 x 110像素，但这将优化LinkedIn，同时导致Facebook上的图像非常小。记住，虽然Facebook要求图片的大小为200 × 200像素或更大，但他们建议你不要选择小于600 × 314像素的图片，这样帖子中的图片就会更大。

相反,根据网络开发者Jay holt诽谤的说法，你可以使用下面的代码在你的页面的标题部分包含两个OG标签，相同的图像在两种不同的大小(你可以用不同大小的图像的url替换红色的代码):

<元属性= " og:形象”内容= "图像- 180 x110.jpg" / > < !Linkedin的图片——>

<元属性= " og:形象”内容= "图像- 600 x315.jpg" / > < !图片为Facebook ->

Twitter打开图

Twitter使用了一个类似于Open Graph标签的系统推特卡标签．(你需要推特卡为了使用Twitter Card标签，已经设置好了。)

如果你已经在你的网站上设置了OG标签，Twitter的工作人员可以让你很容易地生成Twitter卡，而不需要复制你的标签和数据。根据Twitter的dev的博客当Twitter卡片处理器在你的页面上寻找标签时，它首先检查Twitter属性，如果不存在，则返回支持的Open Graph属性。这样既可以在页面上独立定义，又可以将描述内容和体验所需的重复标记数量降到最低。”

但Twitter卡片看起来与Facebook和LinkedIn上的链接帖子非常相似——它会提取标题、图片、URL和简短描述。这里有一个例子:

要设置Twitter Card标签，你需要优化你的图像大小，然后添加适当的Twitter Card标签到你的网站。

优化Twitter Open Graph的图像大小

要求:推特需要您的图像不小于144 x 144像素，文件大小小于1mb。该社交网络还表示，它将自动调整大于4096 x 4096像素的图像。

推荐:和领英一样，推特卡也支持大图片，而不仅仅是方形的缩略图。为了优化你的图片，在这个开放的图形，格式的图像，你想在你的推特推荐不小于300 x 157。

添加Twitter卡片标签

就像在Facebook和LinkedIn上一样，如果你的页面是静态的，而且你不使用HubSpot这样的内容管理系统(CMS)，你需要手动添加Twitter Card标签到你的博客文章所在的每个页面上。像其他社交网络的标签一样，Twitter的标签是元数据，所以你需要将它们添加到你的博客文章所在页面的标题部分。(如果你无法访问你的网站代码，你的开发人员可以帮助你。)

步骤1:复制这个标签:

< meta name = " twitter:形象”内容= "http://example.com/picture.jpg" >

步骤2:用所选图像的URL替换示例图像URL(用红色突出显示)。

步骤3:将生成的代码片段复制并粘贴到页面的HTML标题部分。

就是这样!现在，当你在Twitter上发布文章链接时，它会正确地显示你想要的图像。