SEO 分享与数据统计

14.1 Open Graph优化

Tip

你的网站也是有“身份证”的。当你在微信、Twitter、Slack 里贴链接时，为什么有的只显示蓝色链接，有的却能显示精美的大图、标题和简介？这就是Open Graph Protocol (OG 协议) 的功劳。

1. 为什么要学这个?

你辛辛苦苦写好的产品首页，发到客户群里。客户看到的是 http://mysite.com，这行蓝色的字没有任何吸引力。竞品发出来的链接，带了一张炫酷的产品预览图 and 诱人的标题。 你输在了起跑线上。

2. 核心概念：Meta Tag (元标签)

Open Graph 不是什么高深的技术，它本质上就是一堆写在 HTML <head> 里的 <meta> 标签。它是 Facebook 发明的，用来告诉社交媒体：“我是谁，我长什么样”。

og:title: 名字 (文章标题)。
og:description: 头衔 (简介)。
og:image: 大头照 (封面图)。
og:type: 类别 (文章/视频/网站)。
twitter:card: 版式 (Twitter 特有的，决定是大图还是小图)。

3. 解决方案 (HOW)

3.1 Next.js App Router 写法 (推荐)

Next.js 提供了极其优雅的 metadata API (通常在 layout.tsx 或 page.tsx 中)。

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Vibe Coding',
  description: 'AI 驱动的编程学习',
  openGraph: {
    title: 'Vibe Coding',
    description: 'AI 驱动的编程学习',
    images: ['/cover.png'], // 自动解析为绝对路径
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Vibe Coding',
    description: 'AI 驱动的编程学习',
    images: ['/cover.png'],
  },
}

export default function Page() {}

3.2 爬虫抓取流程图

graph TD
    User["你在微信发送链接"] -->|"Step 1: 发送 URL"| WeChat["微信服务器"]
    
    WeChat -->|"Step 2: 爬取该 URL"| Server["你的网站"]
    
    Server --"Step 3: 返回 HTML"--> WeChat
    
    subgraph Analysis ["微信解析 Head"]
        CheckTitle{"找 og:title"}
        CheckImg{"找 og:image"}
    end
    
    WeChat --> CheckTitle
    WeChat --> CheckImg
    
    CheckImg --"Found"--> Card["渲染精美卡片"]
    CheckImg --"Missing"--> Link["渲染丑陋蓝链"]
    
    style Card fill:#c8e6c9,stroke:#2e7d32
    style Link fill:#ffcdd2,stroke:#c62828

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
相对路径	绝对路径	图片地址必须是 `https://` 开头的绝对路径。Next.js 的 `metadata` (images string array) 会自动帮你拼域名，但如果是手写 HTML object 里的 url 属性，一定要写全。
图片太小	1200x630	这是 OG 图片的黄金比例。太小会被拉伸模糊，太大加载慢。
盲写	调试工具	不要写完就推上线。使用 opengraph.xyz 预览效果，确保每一像素都完美。

5. 真实案例

Story

2021年，消失的流量

某独立开发者发布了自己的 Sass 产品，在 Hacker News 和 Twitter 上获得了大量转发。但他发现 Twitter 来的流量非常少。排查发现，他忘了加 twitter:card 标签，导致 Twitter 认为这只是个普通链接，没把那张精心制作的 Dashboard 截图展示出来。补上标签后，同样的推文，点击率翻了 5 倍。

Vibe 心法：在信息流时代，你只有 0.5 秒的时间抓住用户的眼球。OG Image 不是装饰品，而是你的社交广告牌。遵循黄金比例并精心设计每一个预览卡片，是产品从名不见经传的“蓝链”进化为“品牌”的第一步。

6. 本章小结

社交名片：OG 协议就是你在朋友圈的名片。
Next.js：metadata API 让配置变得非常简单。
调试：上线前一定要预览。

Previous13.10 端口映射实战 Next14.2 SEO基础配置