如何给网站添加OG协议

示例参考：


introduction to the world of mapping - Colby Fayock"
/>
/>
/>




/>
/>



/>


基础属性

要将你的网页转换为可控结构化图形对象，你需要向页面添加基本元数据。四个基本开放图形标签是：

• og:title - 指定你想要在共享时展示的标题。这通常与你网页的

  description

  最多 155 个字符。

  />


  og:title

  最多 35 个字符。

  


  og:site_name

  你的内容所在的整个网站的名称。如果你的对象是较大网站的一部分，则应为整个网站的名称。

  og:url

  当前网页地址的完整链接。

  


  og:description

  页面的描述，最多 65 个字符。类似 og:title，这通常应该和你网站的标签相同，当然，你也可以使其不同。

  


  og:image

  尺寸小于 300KB 且最小尺寸为 300 x 200 的图像（JPG 或 PNG）。此图像一般应通过具有有效非自签名证书的 HTTPS 链接提供。

  />


  虽然使用og:image添加图像比较容易，但有时让你的图像正确显示可能具有挑战性。开放图谱协议包括一些图像标签，例如og:image:urlvsog:image:secure_url以及og:image:width和og:image:height，可以对图像进行更细致的控制。

  尽量确保你遵循开放图形文档[5]中的所有注释和示例。此外，一些社交网络可能会对图像有特殊要求。例如，[Twitter 要求](https://developer.twitter.com...[6])比例为2:1，最小尺寸为 300x157，最大尺寸为 4096x4096，小于 5MB，JPG、PNG、WEBP 或 GIF 格式。

  og:video

  og:video 标签与 og:image 标签相同，用于补充“图形”对象的视频文件的 URL。

  og:type

  为了在图形中表示你的对象，你需要指定其类型。这里[7] 是可用的全部类型列表。你还可以指定自己的类型。

  


  设置开放图标签时，你需要了解哪种类型对你的网站更有意义。如果你的页面专注于单个视频，则使用“video”类型可能是有意义的；如果它是一个没有特定垂直行业的一般网站，你可能更适合使用“website”类型。

  og:locale

  资源的语言环境。如果你有其他语言翻译可用，你也可以使用 og:locale:alternate。如果不指定 og:locale，则默认为 en_US。

  




  video/audio

  还可以共享音频/视频。例如，Facebook 和 Twitter 可以很好地共享视频。当然，WhatsApp 也有这个选项，比如当你分享 Instagram 或 Youtube 链接时，WhatsApp 的预览会在应用内附带视频播放。

  参考链接：前端必看：连OG都不知道还好意思说自己开发过H5？