1
<meta property="og:title" content="文章标题" />
2
<meta property="og:type" content="article" />
3
<meta property="og:image" content="https://example.com/og/cover.jpg" />
4
<meta property="og:url" content="https://example.com/posts/foo" />

1
<meta property="og:title" content="文章标题" />
2

3
<!-- 注意这里是 name，不是 property -->
4
<meta name="twitter:card" content="summary_large_image" />
5
<meta name="twitter:title" content="文章标题" />
6
<meta name="twitter:description" content="一行摘要" />
7
<meta name="twitter:image" content="https://example.com/og/cover.jpg" />

1
// src/components/SeoHead.astro 的核心逻辑
2
const { title, description, published, tags, cover } = Astro.props
3
const site = Astro.site!          // astro.config.mjs 里的 site
4

5
// 关键：用 new URL 而不是字符串拼接，保证拿到绝对 URL
6
const abs = (path: string) => new URL(path, site).href
7

8
// 图片尺寸不硬编码，从构建期已知的元数据推导
9
const coverUrl = abs(cover.url)

1
<meta property="og:type" content="article" />
2
<meta property="og:title" content={title} />
3
<meta property="og:description" content={description} />
4
<meta property="og:url" content={canonicalUrl} />
5
<meta property="og:image" content={coverUrl} />
6
<meta property="og:image:width" content={String(cover.width)} />
7
<meta property="og:image:height" content={String(cover.height)} />
8
<meta property="og:image:alt" content={cover.alt} />
9

10
<meta name="twitter:card" content="summary_large_image" />
11
<meta name="twitter:image" content={coverUrl} />

1
const jsonLd = {
2
  '@context': 'https://schema.org',
3
  '@graph': [
4
    {
5
      '@type': 'Person',
6
      '@id': `${site}#author`,
7
      name: authorName,
8
      url: site.href,
9
    },
10
    {
11
      '@type': 'BlogPosting',
12
      headline: title,
13
      description,
14
      image: [coverUrl],
15
      keywords: tags,
16
      author: { '@id': `${site}#author` },
17
      datePublished: published,        // 已经是 ISO 8601
18
      dateModified: updated ?? published,
19
      mainEntityOfPage: { '@type': 'WebPage', '@id': canonicalUrl },
20
      inLanguage: 'zh-CN',
21
    },
22
  ],
23
}

1
<script is:inline type="application/ld+json" set:html={JSON.stringify(jsonLd)} />

1
// node scripts/check-og.mjs https://www.example.com/posts/foo
2
import { Buffer } from 'node:buffer'
3

4
const url = process.argv[2]
5
if (!url) {
6
  console.error('用法: node scripts/check-og.mjs <页面 URL>')
7
  process.exit(2)
8
}
9

10
const html = await (await fetch(url)).text()
11

12
function parseMeta(head) {
13
  const tags = new Map()
14
  for (const [tag] of head.matchAll(/<meta\b[^>]*>/gi)) {
15
    const attrs = {}
16
    for (const [, key, , dq, sq] of tag.matchAll(
17
      /([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g,
18
    )) {
19
      attrs[key.toLowerCase()] = dq ?? sq ?? ''
20
    }
21
    const name = attrs.property || attrs.name
22
    if (name) tags.set(name, attrs.content ?? '')
23
  }
24
  return tags
25
}
26

27
// 只解析头部字节：PNG 读 IHDR，JPEG 扫 SOF 段
28
async function measure(src) {
29
  const buf = Buffer.from(await (await fetch(src)).arrayBuffer())
30
  const PNG = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
31
  if (buf.subarray(0, 8).equals(PNG)) {
32
    return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) }
33
  }
34
  let i = 2
35
  while (i < buf.length - 9) {
36
    if (buf[i] !== 0xff) { i++; continue }
37
    const marker = buf[i + 1]
38
    if (marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker)) {
39
      return { height: buf.readUInt16BE(i + 5), width: buf.readUInt16BE(i + 7) }
40
    }
41
    i += 2 + buf.readUInt16BE(i + 2)
42
  }
43
  throw new Error('不是 PNG 或 JPEG')
44
}
45

46
const meta = parseMeta(html.slice(0, html.indexOf('</head>')))
47
const fails = []
48
const check = (ok, msg) => { if (!ok) fails.push(msg) }
49

50
// 1. 四个必填属性
51
for (const key of ['og:title', 'og:type', 'og:image', 'og:url']) {
52
  check(meta.has(key), `缺少必填属性 ${key}`)
53
}
54

55
// 2. 图片和页面地址必须是绝对 URL
56
for (const key of ['og:image', 'og:url']) {
57
  const value = meta.get(key)
58
  if (value) check(/^https?:\/\//.test(value), `${key} 不是绝对 URL: ${value}`)
59
}
60

61
// 3. 声明的宽高必须等于图片真实的宽高
62
const src = meta.get('og:image')
63
if (src && /^https?:/.test(src)) {
64
  const real = await measure(src)
65
  const w = meta.get('og:image:width')
66
  const h = meta.get('og:image:height')
67
  if (w) check(Number(w) === real.width, `声明宽 ${w}，实测 ${real.width}`)
68
  if (h) check(Number(h) === real.height, `声明高 ${h}，实测 ${real.height}`)
69
  console.log(`og:image 实测 ${real.width}×${real.height}（声明 ${w ?? '—'}×${h ?? '—'}）`)
70
}
71

72
// 4. JSON-LD 必须能解析且字段齐全
73
const ld = html.match(
74
  /<script[^>]+application\/ld\+json[^>]*>([\s\S]*?)<\/script>/i,
75
)?.[1]
76
if (!ld) {
77
  fails.push('页面里没有 JSON-LD')
78
} else {
79
  try {
80
    const data = JSON.parse(ld)
81
    const nodes = data['@graph'] ?? [data]
82
    const post = nodes.find((n) => /Article|BlogPosting/.test(n['@type'] ?? ''))
83
    check(!!post, 'JSON-LD 里没有 Article/BlogPosting')
84
    for (const key of ['headline', 'datePublished', 'author', 'image']) {
85
      check(post && post[key], `JSON-LD 缺少 ${key}`)
86
    }
87
  } catch (err) {
88
    fails.push(`JSON-LD 不是合法 JSON：${err.message}`)
89
  }
90
}
91

92
if (fails.length) {
93
  for (const f of fails) console.error(`✗ ${f}`)
94
  process.exit(1)
95
}
96
console.log('✓ Open Graph 与结构化数据检查通过')