您的页面标题

# SEO 页面：开放图谱指导社交媒体预览（Facebook、LinkedIn、Slack、Discord 等）的 Open Graph 元标记的实施。具有适当 OG 标签的页面比裸 URL 链接获得的点击次数多 2-3 倍。 **调用时**：**首次使用**时，如果有帮助，请用 1-2 句话开头说明该技能涵盖的内容及其重要性，然后提供主要输出。在 **后续使用** 或当用户要求跳过时，直接转到主输出。 ## 范围（社交共享） * **Open Graph** ：Facebook 发起的协议；在社交平台上共享链接时控制预览卡 ## 4 个基本标签每个可共享页面都需要以下最少标签：标签 |指南 ---|--- **og：标题** |保持在 60 个字符以下；令人信服的；匹配页面内容 **og：描述** | 150–200 个字符；注重转化 **og：图像** |绝对网址 (https://)；推荐1200×630像素 **og：网址** |规范网址；删除重复的共享 ## 推荐的附加标签标签 |目的 ---|--- **og：类型** |内容类型：“网站”、“文章”、“视频”、“产品” **og：站点名称** |网站名称；与标题分开显示 **og：图像：宽度** / **og：图像：高度** |图片尺寸（1200×630像素） **og：图像：替代** |用于辅助功能的替代文本 **og:区域设置** |语言/地区（例如“en_US”）；对于多语言网站 ## 图像最佳实践项目 |指南 ---|--- **尺寸** | 1200×630px（1.91:1 比例），适用于 Facebook、LinkedIn、WhatsApp **格式** | JPG、PNG、WebP； 5MB以下 **网址** |带 https:// 的绝对 URL；没有相对路径 **独特** |尽可能每页一张唯一的图像 ## 常见错误 * 使用相对图像 URL 而不是绝对 https:// * 图片太小或宽高比错误 * 空值或占位符值 * 缺少 og:url（规范） ## 实施 ### Next.js（应用程序路由器）导出常量元数据 = { 打开图：{ 标题： '...', 描述：'...', url: 'https://example.com/page', siteName: '示例', 图片：[{ url: 'https://example.com/og.jpg', 宽度: 1200, 高度: 630, alt: '...' }], 区域设置：'en_US'，类型：'网站'， }, }; ### HTML（通用） <元属性=“og：类型”内容=“网站”> <元属性=“og：图像：宽度”内容=“1200”> <元属性=“og：图像：高度”内容=“630”> ## 测试 * **Facebook** : [共享调试器]() * **LinkedIn** ：[后检查员]() ## 相关技能 * **social-share-generator** ：分享按钮使用 OG 标签，在用户分享时提供丰富的预览；必须为共享按钮设置 OG 才能显示正确的卡片 * **文章页面生成器** ：使用 og:type `article` 作为文章/帖子页面；文章特定标签（published_time、作者） * **页面元数据** ：Hreflang，其他元标记 * **title-tag** ：标题标签通常反映 og:title * **元描述** ：元描述通常反映 og:description * **twitter-cards** ：Twitter 使用 OG 作为后备；添加 Twitter 特定标签以获得最佳效果 * **canonical-tag** : og:url 应匹配规范 URL

打开图

包含技能