参考资料

1. Open Graph协议是由Facebook推出的元数据协议
2. meta禁止页面缓存是一种HTML元标签设置
3. Meta自动刷新
4. Meta 暗色模式适配
5. meta‌‌‌ iOS设备优化是一个用于提升iOS设备性能的库
6. Meta 内容语言声明
7. Meta字符编码声明
8. Meta标签禁止电话号码自动识别

Meta Twitter 卡片

Meta Twitter 卡片

简介

Twitter卡片是Twitter提供的一种富媒体展示方式，允许网页链接在Twitter上显示为包含丰富内容（如图片、视频、描述等）的卡片形式，而不仅仅是简单的URL。

功能

• 增强推文的视觉吸引力

• 提高点击率和参与度

• 展示更多内容信息

• 支持多种卡片类型

主要卡片类型

1. 摘要卡片(Summary Card)

2. 带大图的摘要卡片(Summary Card with Large Image)

3. 应用卡片(App Card)

4. 播放器卡片(Player Card)

基本语法

<meta name="twitter:card" content="卡片类型">
<meta name="twitter:site" content="@网站Twitter账号">
<meta name="twitter:title" content="标题">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="图片URL">

完整示例

<!-- 摘要卡片示例 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述内容">
<meta name="twitter:image" content="https://example.com/image.jpg">

<!-- 带大图的摘要卡片示例 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:creator" content="@作者账号">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="详细描述内容">
<meta name="twitter:image" content="https://example.com/large-image.jpg">

注意事项

1. 图片尺寸要求：

• 摘要卡片：最小120x120px，最大1MB

• 大图卡片：最小300x157px，最大5MB

• 推荐比例：2:1

2. 必须包含twitter:card和twitter:title标签

3. 图片URL必须是绝对路径(包含http://或https://)

4. 描述内容限制在200字符以内

5. 首次发布后，Twitter会缓存卡片内容，修改后可能需要使用Twitter卡验证工具刷新缓存

6. 可以使用Twitter的卡片验证工具测试效果：https://cards-dev.twitter.com/validator

7. 确保服务器robots.txt不禁止Twitter爬虫访问