简介
- 当一个链接被分享的时候,
Twitter会先获取到相关的网页，读取它的tags来展现指定的信息 Twitter有自己的tags。和Open Graph协议很相似, 但是使用了twitter前缀取代了og
分享网页到Twitter的话，需要在要分享的网页的<head></head>内部配置meta标签
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="my Website Title" />
<meta name="twitter:description" content="my description" />
<meta name="twitter:image" content="https://xxx.com/path/image.jpg" />
<!-- <meta name="twitter:url" content="https://xxx/your-page.html" /> -->
备注：
site：网站名称，可以不配置card：类型，比如：summary、summary_large_image等title：分享显示的标题。不配置的话显示<title></title>标签内的值。最多70个字符description：分享显示的描述。不配置的的话显示<meta name="description" />的值。最多200个字符image：分享显示的图片。最小200 * 200；最大纵横比3:1；png、jpeg或者gif格式。如果配置多个，多加几个这个标签即可。图像大小小于1MBurl：跳转的意思。用于分享的不是当前页面的情况。一般不配置。网址必须是标注网址。不得包含任何计数器和会话变量
- 除了有必要指定显示格式, Twitter 自定义的 Tags 其实并不需要。以下可以被认为是能满足让网页在社交媒体中被分享所需的最少的 Tags：
<meta property="og:title" content="my Website Title" />
<meta property="og:description" content="my description" />
<meta property="og:image" content="https://xxx.com/path/image.jpg" />
<!-- <meta property="og:url" content="https://xxx/your-page.html" /> -->
<meta name="twitter:card" content="summary_large_image">
测试网址效果
Card validator
可以将要分享的网页地址拿到Twitter卡片校验器中测试
Twitter 官网
可以将要分享的网页地址拿到Twitter 官网中测试
社交媒体分析
- 如果想使用
Twitter的分析工具。必须提供想要与被分享网页相关联的Twitter用户名 - 如果不使用分析工具，就不用配置这个
tags。它不会对被分享网页在Twitter上的展现产生影响
<meta name="twitter:site" content="@website-username">
总结
- 一般来说，以下这些就够用
<!-- 必需的 Meta Tags -->
<meta property="og:title" content="my Website Title" />
<meta property="og:description" content="my description" />
<!-- <meta property="og:url" content="https://xxx/your-page.html" /> -->
<meta name="twitter:image" content="https://xxx.com/path/image.jpg" />
<meta name="twitter:card" content="summary_large_image">
<!-- 非必需，但是推荐的 -->
<meta name="twitter:image:alt" content="Alt text for image">
<!-- 非必需，但是分析要用的 -->
<meta name="twitter:site" content="@website-username">
发表评论