Title、Description、OG、Twitter Card 自动生成

社交卡片是网站与社交媒体的桥梁，通过精心设计的元数据，让你的内容在分享时脱颖而出。

网页元数据基础

网页元数据（meta tags）是搜索引擎和社交媒体平台了解页面内容的关键信息。本站实现了完整的元数据自动生成机制，包括标题、描述、Open Graph 和 Twitter Card 等，确保在各种平台上都能正确展示。

标题策略

Hugo 模板通过智能逻辑为不同类型页面生成合适的标题：

<!-- 标题策略：Home 用站点标题；AI 资源：Title - Description；其他页：Page Title | Site.Title -->
{{ if .IsHome }}
<title>{{ .Site.Title }}</title>
{{ else if eq .Type "ai" }}
  {{ $titlePart := .Title | truncate 100 }}
  {{ $descPart := .Params.description | default "" | truncate 80 }}
  {{ $fullTitle := cond (eq $descPart "") $titlePart (printf "%s - %s" $titlePart $descPart) | truncate 155 }}
<title>{{ $fullTitle }}</title>
{{ else }}
<title>{{ .Title }} | {{ .Site.Title }}</title>
{{ end }}

标题生成规则：

页面类型标题格式示例
首页{Site.Title}“Jimmy Song 的个人网站”
AI 资源{Title} - {Description}“ChatGPT 使用指南 - AI 工具推荐”
其他页面{Page.Title} | {Site.Title}“Hugo 教程 | Jimmy Song 的个人网站”
表 1: 标题生成策略对比

描述元数据

描述是页面的核心摘要，用于搜索引擎和社交媒体展示：

<!-- 描述：优先 front matter .Params.description -> .Description -> 站点描述；plainify + 截断 155 -->
{{ $rawDesc := cond (ne (printf "%v" .Params.description) "<nil>") .Params.description (cond (ne (printf "%v" .Description) "<nil>") .Description .Site.Params.description) }}
{{ $cleanDesc := $rawDesc | plainify | htmlUnescape | truncate 155 }}
<meta name="description" content="{{ $cleanDesc }}">

描述优先级：

  1. Front Matter 中的 description 字段
  2. 页面的 .Description 属性
  3. 站点级别的 description 配置
  4. 自动清理 HTML 标签并截断到 155 字符

Open Graph 协议

Open Graph 是 Facebook 开发的元数据协议，用于控制网页在社交媒体上的展示效果。本站实现了完整的 OG 协议支持。

OG 基础标签

<!-- Open Graph / Facebook / WeChat -->
{{/* OG type：文章/博客/公告/播客使用 article，其余 website */}}
{{ $ogType := "website" }}
{{ if or (eq .Section "blog") (eq .Section "notice") (eq .Section "podcast") (and (eq .Section "book") (ne .Kind "section")) }}
  {{ $ogType = "article" }}
{{ end }}
<meta property="og:type" content="{{ $ogType }}" />
<meta property="og:url" content="{{ with .Permalink }}{{ . }}{{ end }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:title" content="{{ .Title }} | {{ .Site.Params.author }}" />
<meta property="og:description" content="{{ $cleanDesc }}" />

图片处理逻辑

OG 图片是社交分享的关键元素，本站实现了多层次的图片选择策略：

{{ $image := .Params.cover | default .Site.Params.default_banner | absURL }}
<meta property="og:image" content="{{ $image }}" />
<meta property="og:image:alt" content="{{ .Title }} - {{ .Site.Params.author }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{{ if strings.HasSuffix $image ".png" }}
<meta property="og:image:type" content="image/png" />
{{ else if strings.HasSuffix $image ".jpg" }}
<meta property="og:image:type" content="image/jpeg" />
{{ else if strings.HasSuffix $image ".jpeg" }}
<meta property="og:image:type" content="image/jpeg" />
{{ else if strings.HasSuffix $image ".webp" }}
<meta property="og:image:type" content="image/webp" />
{{ else }}
<meta property="og:image:type" content="image/jpeg" />
{{ end }}

图片选择优先级：

  1. 页面 Front Matter 中的 cover
  2. 站点配置中的 default_banner
  3. 自动转换为绝对 URL

Twitter Card 实现

Twitter Card 让推文在包含链接时显示丰富的预览信息，增强点击吸引力。

Twitter Card 配置

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="jimmysong.io" />
<meta name="twitter:creator" content="@jimmysongio" />
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Params.author }}" />
<meta name="twitter:description" content="{{ $cleanDesc }}" />
<meta name="twitter:image" content="{{ $image }}" />
<meta name="twitter:image:alt" content="{{ .Title }} - {{ .Site.Params.author }}" />

Twitter Card 类型：

类型适用场景图片要求显示效果
summary一般内容120x120px小图 + 标题 + 描述
summary_large_image文章内容1200x675px大图 + 标题 + 描述
app应用推广1200x675px应用信息展示
player媒体内容各种尺寸媒体播放器
表 2: Twitter Card 类型对比

微信等平台兼容

除了主流社交平台，本站还针对微信、QQ 等中国平台做了特别优化。

微信分享优化

<!-- WeChat / QQ / Mobile compatibility -->
{{/* 发布时间/修改时间：仅在存在日期且非首页且 .Date 合法时输出 */}
{{ if and (not .IsHome) .Date (ne (.Date.Format "2006") "0001") }}
  <meta property="article:author" content="{{ .Site.Params.author }}" />
  <meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
  {{ if and .Lastmod (ne (.Lastmod.Format "2006") "0001") }}<meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}" />{{ end }}
{{ end }}
<meta name="author" content="{{ .Site.Params.author }}" />

<!-- Additional meta for better WeChat sharing -->
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />

搜索引擎优化标签

<!-- Additional SEO meta tags -->
{{ if .Params.tags }}
<meta name="keywords" content="{{ delimit .Params.tags ", " }}">
{{ end }}
{{ if and .Date (ne (.Date.Format "2006") "0001") }}
<meta name="date" content="{{ .Date.Format "2006-01-02" }}">
{{ end }}
{{ if and .Lastmod (ne (.Lastmod.Format "2006") "0001") }}
<meta name="last-modified" content="{{ .Lastmod.Format "2006-01-02" }}">
{{ end }}

{{/* Canonical URL */}
<link rel="canonical" href="{{ .Permalink | absURL }}">

页面级别定制

通过 Front Matter 可以为特定页面定制社交卡片信息：

---
title: "自定义标题"
description: "自定义描述，覆盖默认设置"
cover: "https://example.com/custom-image.jpg"
tags:
  - "标签1"
  - "标签2"
---

多语言支持

系统自动处理不同语言版本的元数据：

{{/* hreflang 占位：后续 partial 引入 */}}
{{ partial "hreflang.html" . }}

调试与验证

验证工具

平台工具地址验证内容
Facebookhttps://developers.facebook.com/tools/debug/Open Graph 标签
Twitterhttps://cards-dev.twitter.com/validatorTwitter Card
通用https://opengraph.xyz/多种社交平台预览
表 3: 社交卡片验证工具

浏览器调试

// 检查 OG 标签
document.querySelectorAll('meta[property^="og:"]').forEach(meta => {
  console.log(meta.getAttribute('property'), ':', meta.getAttribute('content'));
});

// 检查 Twitter Card 标签
document.querySelectorAll('meta[name^="twitter:"]').forEach(meta => {
  console.log(meta.getAttribute('name'), ':', meta.getAttribute('content'));
});

性能优化

图片优化

  • 使用 WebP 格式减少文件大小
  • 设置合适的图片尺寸（1200x630 for OG, 1200x675 for Twitter）
  • 实现图片懒加载和缓存策略

缓存策略

<!-- 站点级别缓存 -->
{{ $siteScratch := .Site.Home.Scratch }}
{{ if eq ($siteScratch.Get "meta-processed") nil }}
  <!-- 处理一次性的站点级元数据 -->
  {{ $siteScratch.Set "meta-processed" true }}
{{ end }}

最佳实践

内容质量保证

  1. 标题优化：确保标题长度适中（30-60 字符），包含关键词
  2. 描述撰写：编写吸引人的描述（120-160 字符），突出价值主张
  3. 图片选择：使用高质量的横幅图片，符合平台尺寸要求

技术实现

  1. 模板复用：将通用逻辑提取为 partials 便于维护
  2. 条件渲染：根据页面类型和参数动态调整元数据
  3. 错误处理：为缺失数据提供合理的默认值

监控与维护

  1. 定期验证：使用验证工具检查元数据正确性
  2. 分享测试：在不同平台上测试分享效果
  3. 性能监控：关注页面加载速度和 Core Web Vitals

通过精心设计的社交卡片系统，本站确保了在微信、Twitter、Facebook 等各种平台的优质展示体验。自动化的元数据生成不仅提升了工作效率，还保证了分享效果的一致性和专业性。

总结

社交卡片是现代网站不可或缺的 SEO 和社交媒体优化手段。通过 Hugo 的强大模板系统，本站实现了完整的元数据自动生成机制，包括：

  • 智能的标题和描述策略
  • 完整的 Open Graph 协议支持
  • Twitter Card 优化
  • 微信等平台的兼容性处理
  • 页面级别的灵活定制

这些实现不仅提升了内容的社交分享效果，还为用户提供了更好的浏览体验，是现代静态网站建设的重要组成部分。

参考文献

文章信息

创建于: 2025/06/19
更新于: 2025/11/05
字数: 2021
阅读时间: 5 mins

文章导航