参考资料

  1. meta charset="UTF-8" 是HTML文档中用于指定字符编码的元标签
  2. meta name="viewport"是用于控制移动设备上网页显示方式的元标签
  3. Meta 暗色模式适配
  4. name="author" 是 HTML 标签的一个属性,用于指定网页的作者信息
  5. Meta作者与版权信息
  6. 如何优化meta参数提升排名
  7. Meta自动刷新
  8. Meta 文档类型声明(DOCTYPE)是HTML文档开头的声明

Open Graph协议是由Facebook推出的元数据协议

简介:
Open Graph协议是由Facebook推出的元数据协议,用于标准化网页内容在社交网络中的呈现方式。它通过在网页HTML头部添加特定meta标签来实现。

功能:

  1. 控制内容在社交平台分享时的显示形式

  2. 定义丰富的分享预览(标题、描述、图片等)

  3. 支持内容类型标记(文章、视频、产品等)

  4. 实现跨平台内容一致性展示

基本语法:

<meta property="og:属性名" content="属性值" />

核心属性:

  • og:title - 内容标题

  • og:type - 内容类型(article/video/website等)

  • og:url - 规范URL

  • og:image - 预览图片URL

  • og:description - 内容描述

  • og:site_name - 网站名称

示例代码:

<head>
  <meta property="og:title" content="示例文章" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://example.com/article" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:description" content="这是示例文章的描述" />
  <meta property="og:site_name" content="示例网站" />
</head>

注意事项:

  1. 图片推荐尺寸至少1200x630像素

  2. 必须包含title、type、url、image四个基本属性

  3. URL需使用绝对路径

  4. 不同平台可能支持不同的扩展属性

  5. 可使用Facebook分享调试工具验证效果

  6. 内容更新后可能需要重新抓取才能生效