1. 首页
  2. 网络营销赋能
  3. 海外营销

如何为社交分享优化博客图片:打开图形标签的简介

我们以前都去过那里。你写了一篇很棒的博客文章,你在那里填写了一个特色图片来代表社交媒体上的帖子,你博客的主页等等。

然后,您跳过社交媒体帐户并将链接粘贴到新帖子中。您已准备好与您的网络共享它,但只有一个问题。不幸的是,社交网络正在拉错了缩略图。或者更糟糕的是,他们根本没有拉动任何东西。

这不仅令人讨厌 – 你已经接近完成了 – 但是一个糟糕的缩略图(或没有缩略图)可能严重损害你的帖子在社交上的表现。图像是获取社交页面参与度的关键因素,数据显示它们有助于产生更多喜欢,分享和评论。例如,以图片为特色的推文会导致转发量增加150%。但是,该图像需要是正确的图像 – 不是您的徽标,而不是您的号召性用语按钮的截止图片,而不是从页面中随机抽取的其他图像。

点击此处获取使您的网站在搜索中排名所需的一切。
那么,您如何确保每个社交网络都能获得您想要的图像?答案在于称为开放图谱协议的东西。

打开图表
开放图是Facebook在2010年首次创建的协议,用于从网页中提取标题,图像,URL和元信息,并将其显示在社交媒体帖子中。今天,Facebook,Twitter和LinkedIn都使用开放图形协议来帮助发布商在其社交媒体帖子的前面添加更多内容。

当您在Facebook或LinkedIn上或通过Twitter卡分享网站或文章时,您会注意到这些社交网络中的每一个都会自动将一些信息提取到您的社交帖子中:网站的标题,图像,URL,和简短的描述。这可以使用每个社交网络的开放图形协议。

LinkedIn已经采用了Facebook最初开发的相同协议,而Twitter使用自己的开放图形系统,该系统基于相同的约定 – 尽管如果您已经在您的网站上拥有它,Twitter可以使用Open Graph协议。另请注意,Twitter仅在您使用Twitter卡时自动从链接中提取信息 – 而不是常规推文。

如何使用开放图谱协议
营销人员如果想在社交媒体上发布更好看的内容,则需要开放式图形(OG)协议。但是每个社交网络在哪里找到这些信息?这就是开放图形标签的用武之地。当您将OG标签放在网页的头部时,社交网络可以更轻松地为社交帖子的每个部分找到正确的信息。

打开图形标签
开放图形标签是发布者可以插入其网页的特定信息,因此社交网络知道要将哪些网站属性引入社交媒体帖子。某些CMS会自动包含元标记,而其他网站则需要您通过页面的HTML手动添加它们。

如果您的网页在代码中没有OG标记,他们会猜测在哪里可以找到正确的信息。通常他们会对标题,网址和说明做得很好,但他们可能无法选择正确的图片。 OG图像标签准确地告诉社交网络要拉动哪个图像。

如果您计划在社交媒体帖子中使用某些网页或博客帖子,则每个页面中最常包含的OG标记很少:一个用于网页标题,一个用于您要显示的图像,一个用于URL网页,以及一个描述页面的一到两个句子的元描述。以下是它们在下面的所有内容,所有大写字母中的占位符文本表示您可以自定义每个标记的内容以反映您希望社交媒体帖子显示的内容。

<meta property =“og:title”content =“TITLE OF PAGE”/>
<meta property =“og:image”content =“仅限图片的网址”/>
<meta property =“og:url”content =“WEBPAGE的网址”/>
<meta property =“og:description”content =“PAGE OF PAGE”/>
看到“og:…”文本描述上面每行的元属性?之后的文本是OG标记的标记类别,告诉您要发布到您的网页上要查找的内容类型的社交网络。例如,第一个标题为“og:title”,因为此标记表示您希望在社交媒体帖子顶部显示的网页标题。发表博客文章? OG标题标签可能是您文章的标题。

根据您发布的媒体类型 – 图片,视频,信息图或文本 – 您可能会发现需要其他OG标记以进一步自定义发布在您的社交媒体Feed上的OG内容。这里有几个:

“og:image:width” – 此OG标记嵌套在图像标记中,允许您在社交媒体帖子中定义要素图像的特定宽度。
“og:image:height” – 此标记嵌套在图像标记中,允许您定义特定标记

要素图像的高度。我们将在下一节中详细讨论每个社交网络的推荐图像大小。
“og:article” – 此标签让社交网络知道您的帖子是一篇文章,并且您可以在此文章中嵌套其他几个标签,以进一步宣传您的社交媒体帖子中的文章。
“og:article:author” – 此标记嵌套在文章标记中,允许您在社交媒体帖子中宣传文章的作者(或署名)。
“og:audio” – 此标签允许您在社交媒体帖子中宣传和描述可播放的音频文件。
“og:video” – 此标签允许您在社交媒体帖子中宣传和描述可播放的视频。
“og:video:series” – 此标记嵌套在视频标记中,如果您的视频属于较大的视频广告系列,则可以宣传和定义视频系列。
列表继续为您提供OG标记类别。博客,游戏,城市,图书,公司,酒店和国家/地区都是OG标签的类别,您可以使用这些标签来自定义您的Facebook,Twitter和LinkedIn帖子,以最好地代表您为受众群体服务的内容。

打开图形图像大小
虽然您的图像在发布到Facebook,Twitter和LinkedIn时看起来很相似,但每个社交网络的开放图形协议都有自己的最小图像大小要求。例如,Facebook建议使用1200 x 630的图像。

HubSpot和WordPress用户的好消息:如果您使用HubSpot进行博客,您的社交网络将自动提取特色图片 – 只需确保在每篇博文中指定一个精选图片。 (专业提示:尝试将特色图片上传至COS至少610像素宽,最终在Facebook,Twitter和LinkedIn上看起来更好。尽管LinkedIn的照片尺寸要求小图片,但COS应自动调整大小。)

如果你使用WordPress,你需要安装这个插件或者类似的插件,但是你会被设置为去。

最后,如果您不使用内容管理系统(CMS),这篇文章适合您,因为您需要手动为您网站上的每个页面执行此操作。我们将向您展示如何在前三个社交网络上手动优化社交发布图片以分享内容的逐步说明:Facebook,LinkedIn和Twitter。

为了确保Facebook从博客文章中将正确的图像提取到您的Facebook帖子中,您需要首先优化Facebook的图像大小,然后将适当的OG标记添加到您的网站。

优化Facebook Open Graph的图像大小
必需:Facebook要求您使用至少200 x 200像素的图像。

建议:虽然200 x 200是绝对最小值,但Facebook建议使用至少600 x 314像素的图像。为了在高分辨率设备上获得最佳显示效果,该公司建议选择至少1200 x 630像素的图像。

如果您的图片小于600 x 314像素,它仍会显示在您的帖子中,但会显示为缩略图大小的图片。因此,如果您的图像带有很多重要的细节,这些细节会在如此小的框架中丢失,最好将您的OG图像标记设置为1200 x 630。

样本Facebook帖子显示开放图形协议
添加Open Graph标签
如果您的页面是静态的,并且您不使用像HubSpot这样的CMS,则需要手动将OG标记添加到您的博客文章所在的每个页面上。标签是元数据,因此您需要将它们添加到您的博客文章所在页面的头部。 (如果您不管理站点上的代码,则需要向Web开发人员寻求帮助。)

1.复制下面的元标记。
<meta property =“og:image”content =“http://example.com/picture.jpg”/>

<meta property =“og:image:width”content =“1200”/>

<meta property =“og:image:height”content =“630”/>

2.用您选择的图像的URL替换占位符文本。
接下来,使用图像的实际网址删除上面的示例图片网址,以红色突出显示。对高度和宽度数字执行相同操作,以绿色突出显示,并使用正确的图像尺寸替换它们。请记住Facebook的图像大小要求。

3.将生成的代码段复制到页面的HTML头部分。
在步骤1中使用您自己内容的图像URL和维度填写代码后,打开源代码(通常用此图标表示:“<>”)并将其粘贴到页面顶部的HTML中。

4.将以前共享的网页输入Facebook的共享调试程序。
(如果您之前从未发布过您正在处理的网页,请不要担心此步骤。)

如果您之前发布的此网页没有标签,或者您发布了该页面,然后意识到您搞砸了标签并需要调整它们,那么您需要在进行任何更改后通过Facebook的调试器运行URL。这是因为Facebook缓存了它的共享页面 – 所以如果你不刷新缓存,那么缩略图

所有不会被纠正。

而已!现在,当您将文章的链接发布到Facebook时,Open Graph Protocol将读取OG:image标签并显示您指向的图像。 (在Facebook开发博客上了解有关标题,描述等的OG标签的更多信息。)

LinkedIn Open Graph
与Facebook一样,LinkedIn也使用开放图形协议。因此,当您与LinkedIn网络共享链接时,LinkedIn会在文章中搜索标题,图片和网址,然后使用该信息填写我们的LinkedIn帖子。 (虽然他们没有明确表示他们会搜索元描述,但是他们的算法确实会将其拉入。)以下是HubSpot发布的LinkedIn帖子示例,其中的元描述显示在页面标题下方:

LinkedIn发布者HubSpot使用开放图形协议
为了确保LinkedIn从您的帖子中提取正确的图像以用作缩略图,您需要优化该图像的大小,然后将适当的OG标记添加到您的网站,就像您对Facebook一样。

优化LinkedIn Open Graph的图像大小
必需:LinkedIn要求缩略图图像至少为80 x 150像素但不大于80 x 110.如果您的图像不符合这些要求,LinkedIn将自动在您的页面上提取符合正确尺寸的其他图像。

推荐:LinkedIn的共享模块能够推广宽大的矩形图像,这可以提高您的帖子在80 x 150缩略图上的点击率。为了共享这样的图像,该公司建议使用1200 x 627的图像,并尽可能接近1:91:1的宽高比(即矩形,而不是方形)。

添加Open Graph标签
就像在Facebook上一样,如果您的页面是静态的并且您不使用像HubSpot这样的内容管理系统(CMS),则需要手动将OG标记添加到您的博客帖子所在的每个页面。标签是元数据,因此您需要将它们添加到您的博客文章所在页面的头部。 (同样,如果您无法控制网站上的代码,则需要向Web开发人员寻求帮助。)

1.复制下面的元标记。
<meta property =“og:image”content =“http://example.com/picture.jpg”/>

<meta property =“og:image:width”content =“1200”/>

<meta property =“og:image:height”content =“627”/>

2.用您选择的图像的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像素而不会过度,但这样可以优化LinkedIn,同时在Facebook上生成非常小的图像。请记住,虽然Facebook要求图像尺寸为200 x 200像素或更大,但他们建议您不要小于600 x 314像素,因此帖子中的图像很大。

相反,根据网站开发人员Jay Holtslander的说法,您可以使用此代码在页面的head部分为两个不同大小的同一图像添加两个OG标记(并且您将使用不同大小的URL替换红色代码)图片):

<meta property =“og:image”content =“image-180×110.jpg”/> <! – 180×110图片为Linkedin – >

<meta property =“og:image:width”content =“180”/>

<meta property =“og:image:height”content =“110”/>

<meta property =“og:image”content =“image-600×315.jpg”/> <! – 600×315 Facebook的图像 – >

<meta property =“og:image:width”content =“600”/>

<meta property =“og:image:height”content =“314”/>

Twitter Open Graph
Twitter使用类似于Open Graph标签的系统,称为Twitter Card标签。 (您需要设置Twitter卡才能使用Twitter Card标签。)

如果您已经在您的网站上设置了OG标签,那么Twitter上的人员可以很容易地生成Twitter卡而无需复制您的标签和数据。根据Twitter的开发博客,“当Twitter卡处理器在您的页面上查找标签时,它首先检查Twitter属性,如果不存在,则回退到支持的Open Graph属性。这允许两者都是de

在页面上独立处罚,并最大限度地减少描述您的内容和体验所需的重复标记量。“

但Twitter卡看起来与Facebook和LinkedIn上的链接帖非常相似 – 它提取标题,图像,URL和简短说明。这是一个例子:

研究表明,当人们感觉被包含时,他们表现得最好 – 当他们感到受到同伴的重视,授权和尊重时.https://t.co/ZfcdlULWfo

– HubSpot(@HubSpot)2019年1月21日
要设置Twitter Card标记,您需要优化图像大小,然后将适当的Twitter Card标记添加到您的网站。

优化Twitter Open Graph的图像大小
必需:Twitter要求您的图像不小于144 x 144像素且文件大小小于1 MB。社交网络还称其将自动调整大于4096 x 4096像素的图像。

推荐:像LinkedIn一样,Twitter Cards也支持大图像,而不仅仅是方形缩略图。要针对此打开的图表优化图像,请将您想要在推文中显示的图像格式设置为不小于300 x 157。

添加Twitter卡标签
就像在Facebook和LinkedIn上一样,如果您的页面是静态的,并且您没有使用像HubSpot这样的内容管理系统(CMS),则需要手动将Twitter Card标签添加到您的博客帖子所在的每个页面上。与其他社交网络的标签一样,Twitter的标签是元数据,因此您需要将它们添加到您的博客文章所在页面的头部。 (如果您无法访问网站代码,您的开发人员可以提供帮助。)

第1步:复制此标记:

<meta name =“twitter:image”content =“http://example.com/picture.jpg”>

步骤2:用您选择的图像的URL替换以红色突出显示的示例图像URL。

第3步:将生成的代码段复制并粘贴到页面的HTML head部分。

而已!现在,当您将文章的链接发布到Twitter时,它将正确显示您想要的图像。

本文来自投稿,不代表穷思笔记立场,如若转载,请注明出处:https://www.chons.cn/11114.html

发表评论

登录后才能评论

联系我们

 

在线咨询:点击这里给我发消息

邮件:2267450086@qq.com

QR code