网站社交媒体分享配置指南 Open Graph (OG) 标签
为了确保在分享文章到如 Facebook、Twitter、WhatsApp、WeChat 和 LinkedIn 等社交平台时，正常显示缩略图、标题和摘要信息，你需要进行以下配置：
1. 配置 Open Graph (OG) 标签
Open Graph（OG）是由 Facebook 提出的，用来为网页设置元数据，帮助社交平台提取文章的缩略图、标题和描述。你需要在网页的 <head> 部分添加一些 OG 标签。
主要的 OG 标签包括：
<meta property="og:title" content="文章标题" />
<meta property="og:description" content="文章摘要" />
<meta property="og:image" content="文章缩略图URL" />
<meta property="og:url" content="文章的URL" />
<meta property="og:type" content="article" />2. 配置 Twitter 卡片（可选）
Twitter 使用 Twitter Cards 来展示链接内容。如果你也希望在 Twitter 上显示类似的信息，可以添加如下标签：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="文章标题" />
<meta name="twitter:description" content="文章摘要" />
<meta name="twitter:image" content="文章缩略图URL" />
<meta name="twitter:url" content="文章的URL" />3. 使用 Yoast SEO 插件（推荐）
如果你不想手动添加所有的 Open Graph 和 Twitter 卡片标签，可以使用 Yoast SEO 插件来自动生成这些标签。
安装 Yoast SEO：
- 在 WordPress 后台，进入“插件”>“安装插件”。
- 搜索并安装 Yoast SEO 插件。
- 启用插件后，进入“SEO”>“社交”选项，勾选“添加 Open Graph 数据”。
- 在“社交”选项卡下，可以进一步设置 Facebook、Twitter、Instagram 等平台的默认内容。
Yoast SEO 会自动为每篇文章添加 OG 标签，确保缩略图、标题和描述信息能够正确显示。
4. 配置微信分享（特有需求）
微信分享也需要使用一些特殊的元标签。通常，微信会读取 og:image 标签，但它可能会忽略 meta 标签的内容，因此，你需要确保缩略图符合微信的规范（比如尺寸要求）。如果你希望为微信设置不同的缩略图，可以使用以下代码：
<meta property="og:image" content="微信专用缩略图URL" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />5. 缩略图大小要求
确保文章的缩略图符合各平台的尺寸要求。常见的要求如下：
- Facebook / LinkedIn：最小 1200x630px（建议使用 1200x630px 或 1200x1200px）
- Twitter：推荐 1200x675px
- 微信：推荐尺寸为 300x200px（但具体要求可能因微信版本不同有所变化）
6. 使用插件辅助分享（如需要）
你还可以使用社交分享插件（如 Social Warfare、AddToAny 或 ShareThis）来为你的文章添加社交分享按钮，确保它们支持这些平台，并能够在分享时正确显示文章信息。
这些插件通常会在后台设置中自动处理相关的 Open Graph 数据，但你也可以手动调整它们以便更符合你的需求。
总结
- 在页面的
<head>部分添加必要的 OG 标签和 Twitter 卡片标签。 - 使用 Yoast SEO 插件自动生成和管理这些标签。
- 确保社交分享图片符合各平台的尺寸要求。
- 使用社交分享插件来提升用户分享体验。
完成以上步骤后，用户在社交平台分享你的文章时，应该能够正确显示缩略图、标题和摘要信息。
7. 手动添加代码：你可以手动添加代码到你的 WordPress 主题文件中来配置这些设置。例如：
- 添加 Open Graph 协议标签到 header.php 文件中
- 添加 Twitter Card 代码到 functions.php 文件中
以下是一个示例代码，展示了如何添加 Open Graph 协议标签到 header.php 文件中：
<?php
// 添加 Open Graph 协议标签
function add_open_graph_tags() {
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url(); ?>" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<?php
}
add_action('wp_head', 'add_open_graph_tags');
?>