如何使用 meta 标签 在Twitter上分享你的页面并使其具有更丰富的格式?

10 min read

要在Twitter上分享你的页面并使其具有更丰富的格式,可以使用Twitter卡片(Twitter Cards)和meta标签来实现。下面是步骤:

  1. 选择适合的Twitter卡片类型:Twitter提供了几种不同类型的卡片,可以根据你的页面内容选择最合适的类型。常用的卡片类型有摘要卡片(Summary Card)、大图卡片(Large Image Card)、播放器卡片(Player Card)等。

  2. 在页面的head标签中添加meta标签:使用meta标签来提供卡片的相关信息。根据你选择的卡片类型,可以添加不同的meta属性。

    • 对于摘要卡片(Summary Card),可以添加以下meta标签:

      <meta property="twitter:card" content="summary">
      <meta property="twitter:title" content="页面标题">
      <meta property="twitter:description" content="页面描述">
      <meta property="twitter:image" content="图片链接">
      
    • 对于大图卡片(Large Image Card),可以添加以下meta标签:

      <meta property="twitter:card" content="summary_large_image">
      <meta property="twitter:title" content="页面标题">
      <meta property="twitter:description" content="页面描述">
      <meta property="twitter:image" content="大图链接">
      
    • 对于播放器卡片(Player Card),可以添加以下meta标签:

      <meta property="twitter:card" content="player">
      <meta property="twitter:title" content="页面标题">
      <meta property="twitter:description" content="页面描述">
      <meta property="twitter:image" content="缩略图链接">
      <meta property="twitter:player" content="播放器链接">
      
  3. 确认meta标签是否正确地添加在了页面的head标签中,可以通过查看页面源代码来核实。

  4. 使用Twitter的Card Validator工具进行测试:在Twitter的Card Validator页面(https://cards-dev.twitter.com/validator)上,输入你页面的URL,点击“Preview card”按钮,查看卡片的预览效果。

  5. 如果预览效果符合预期,就可以分享你的页面链接到Twitter上了,卡片的丰富格式会在推文中显示出来。

请注意,meta标签的属性值要参考Twitter的官方文档来正确设置。不同的卡片类型可能有额外的要求和限制,你可以查阅Twitter的官方文档以获取更多详细信息。