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

介绍

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

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

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

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

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

OG 标签

这里列举常见的参数如下表：

标签	作用
og:title	标题
og:description	描述
og:image	图像网络地址，建议1200 x 630尺寸
og:url	网站地址，用于计算URL权重归属
og:type	标记 URL 内容类型，一般默认是website，除此之外还有 article，video，music，book 等值可以设定
og:site_name	网页所属的网站名称
og:locale	语言和地区信息，en_US，zh_CN 等
og:article	这是一组信息标记新闻，博客详细内容，详细有哪些值可以参考：https://ogp.me/#no_vertical

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

图像：

`og:image`	图像的网址，一般网站都会根据 URL 缓存内容，缓存有实效性或者使用手动更新缓存。
`og:image:url`	与 `og:image` 作用相同
`og:image:secure_url`	图像的 https:// 网址
`og:image:type`	图像的 MIME 类型。`image/jpeg`、`image/gif` 或 `image/png` 其中之一
`og:image:width`	图像宽度，以像素为单位。指定图像的高度和宽度，确保图像在第一次分享时正确加载。
`og:image:height`	图像高度，以像素为单位。指定图像的高度和宽度，确保图像在第一次分享时正确加载。

视频：

`og:video`	视频的网址。如果想要视频在动态中内嵌播放，您应尽可能使用 https:// 网址。
`og:video:url`	与 `og:video` 作用相同
`og:video:secure_url`	视频的安全网址。即使在 `og:video` 中设置了安全网址，也请添加此属性。
`og:video:type`	视频的 MIME 类型。`application/x-shockwave-flash` 或 `video/mp4`。
`og:video:width`	视频宽度，以像素为单位。此为视频的必要属性。
`og:video:height`	视频高度，以像素为单位。此为视频的必要属性。
`og:image`	指定一张图像，在动态中显示高品质预览

完整标签内容请参考：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 lang="en">
<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>