通过 OG 标签优化网站在社交媒体上的显示效果

2024-10-28 渥太华微生活

open-graph.jpg


介绍

OG 标签Open Graph Protocol 的缩写,是一种由 Facebook 所定义和推广的元数据协议,用于在社交媒体上显示网页的预览内容。

OG 标签允许网站管理员控制他们网站页面在 Facebook、Twitter、LinkedIn 等社交媒体上的展示形式,可以设置网页的标题、描述、图像、URL 等元素。

以便在社交媒体上展示具有吸引力和正确的信息的网页预览。这些元素可以让网站在社交媒体上更好地分享和传播,提高网站的曝光率和流量。

通俗的来说就是通过 meta 标签上设置 OG 内容可以控制网页在社交媒体上的展示效果,例如标题、描述、图像和 URL 等元素。

如下图这种预览效果不仅能够吸引更多的用户点击访问您的网页,还能提升您的品牌形象和知名度。

1340345-20230401124820143-1174010333.png


OG 标签

常见的参数如下表:

2024-10-28_104455.jpg

而我们一般要用到的是图片与视频两种类型的 OG 标签设置,以下表格参考的是 Facebook 文档参数:

图像:

2024-10-28_104540.jpg

视频:

2024-10-28_104652.jpg

完整标签内容请参考:The Open Graph protocol (ogp.me)


如何设置 OG 标签

添加 OG 标签,需要在 HTML 代码的 <head> 标签中添加 <meta> 标签,并设置对应上述的 OG 属性和值。

<head>
  <meta property="og:title" content="标题">
  <meta property="og:description" content="描述">
</head>

实践

您在实际设置 OG 内容时可能需要考虑一些问题了:

相同 URL 网站地址可能只有第一次获取内容是根据爬虫获取的,后面网站就直接读缓存了。

网站爬虫在获取 OG 数据时是获取网站文本内容解析的,您的网站的 JS 是没法在网站获取时运行的哦。

不同平台网站根据解析内容展示出的内容并不一致,建议您还是在实际尝试后再调整您的 OG 内容。

如果您想根据前端参数动态设置 OG 标签以决定页面在社交媒体上的分享样式,就需要使用服务端参数来渲染 <meta> 标签,并需要将参数添加到页面路径中,从而实现不同参数对应不同的路径。 

可以将 <meta> 区域设置成动态的布局模版,或者将后端渲染的页面仅作为分享页面,用户点击后再跳回真正实际页面,如下是后端通过模版控制分享图片的示例代码:

<!DOCTYPE html>
<html>
<script>
    const url = '{{.revere_url}}'
    window.location.href = url
</script>
<head>
    <meta charset="UTF-8">
    <meta property="og:url" content="{{.revere_url}}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="标题" />
    <meta property="og:description" content="描述" />
    <meta property="og:image" content="{{.share_img}}" />
    <meta property="og:image:type" content="image/jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="631">
    <title>网站标题</title>
</head>
<body></body>
</html>

可以看到代码是后端通过模版代码来动态渲染 OG 内容,当真正用户点击打开后会跳转到实际页面。


调试 OG 标签

在实际开发中您会发现平台缓存的机制让调试十分难受,所以推荐使用如下工具来调试您的 OG 标签:

Meta Tags — Preview, Edit and Generate:可以根据您的写的内容来生成 OG 标签代码,只需点击右上角 Generate Meta Tags 按钮。

Facebook 调试工具:Facebook 调试工具可以通过您填写的 URL 来抓取您的网页 OG 内容并生成分享样式,但我在尝试时候发现图片会和实际分享的样式不太一样。


总结

在社交媒体时代,使用 OG 标签是提高网页在社交媒体上曝光和点击率的有效方法。

OG 标签包括 og:title、og:description、og:image 等参数。编写优秀的 OG 标题和描述需要注意简明扼要、突出重点、使用关键词、保持一致、使用动词等技巧。

同时如果需要动态设置 OG 标签,可以使用服务端参数来渲染 <meta> 标签,并将参数添加到页面路径中,实现不同参数对应不同路径的效果。

通过合理设置 OG 标签,可以提高网页在社交媒体上的曝光和点击率,增强用户体验和网页的 SEO 效果。

编者注:新闻取自各大新闻媒体,新闻内容并不代表本网立场!文字和图片来自网络,版权归原作者所有。如有侵权,请速联系小编,立即删除。

349
全部评论 (0)
展开快速发表评论
二维码 | 渥太华微生活
<广而告之>
缩略图

看新闻?

渥太华微生活

- 新闻|活动|优惠|房屋|汽车|留学|移民|工作|理财|旅游|美食|健康|宠物|种植|文化|时尚|科技|历史|体育|黄页


缩略图

刷视频?

传奇视频

- 电影 | 电视剧 | 综艺 | 小品 | 动漫 | 戏曲 | 短视频


缩略图

听音频?

传奇音频

- 音乐 | 有声小说 | 评书 | 相声


缩略图

找乐趣?

传奇活动

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里


缩略图

想省钱?

传奇打折

- Amazon打折专区 | Temu打折专区 | 打折资讯


缩略图

租房子?

传奇租房

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里

科技专栏