推荐的HTML头部社交标签

社交媒体对于任何内容的成功起着重要作用。为了确保您的内容在社交媒体上得到正确分享，您应该在<head>元素中包含一些必要的标签：

<head>
  <meta property="og:title" content="页面标题">
  <meta property="og:description" content="页面描述。不超过155个字符。">
  <meta property="og:image" content="https://samplesite.com/image.jpg">
  <meta property="og:site_name" content="示例网站">
  <meta property="og:url" content="https://samplesite.com/page.html">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="页面标题">
  <meta name="twitter:description" content="页面描述。不超过155个字符。">
  <meta name="twitter:image" content="https://samplesite.com/image.jpg">
  <meta name="twitter:site" content="@samplesite">
</head>

上面的代码片段包含了OpenGraph和Twitter标签。OpenGraph标签被Facebook和其他社交媒体平台用于在分享时显示页面的预览。类似地，Twitter使用Twitter标签来提供相同的信息。以下是每个标签的详细说明：

og:title和twitter:title元标签用于在预览中显示页面的标题。
og:description和twitter:description元标签用于在预览中显示页面的简短描述。
og:image和twitter:image元标签用于在预览中显示图片。
og:site_name元标签用于在预览中显示网站的名称。
og:url元标签用于在预览中显示页面的URL。
twitter:card元标签用于在分享时显示页面的预览。可用的值有summary、summary_large_image、app和player。
twitter:site元标签用于在预览中显示网站的Twitter用户名。