为 Typecho 主题添加动态社交媒体分享标签（OG + Twitter Card）

为什么要添加社交媒体分享标签？

当您在微信、QQ、Facebook、Twitter 等平台分享博客链接时，平台会自动抓取页面的标题、描述和缩略图，生成一个漂亮的卡片。如果您的网站没有配置 Open Graph（OG）标签，分享出去的内容可能只有光秃秃的链接，或者抓取到错误的图片。

本文介绍一段 纯 PHP 代码，可以无缝集成到任何 Typecho 主题中，实现每篇文章独立显示标题、描述和首张图片，极大提升分享体验。

代码功能一览

  • ✅ 自动提取文章标题
  • ✅ 智能生成描述：优先使用文章自定义字段 description，否则截取正文前 150 字

  • ✅ 自动提取分享图片：

    • 优先级 1：文章自定义字段 thumb
    • 优先级 2：正文中第一张 Markdown 格式图片 ![alt](url)
    • 优先级 3：正文中第一张 HTML <img> 标签
    • 优先级 4：默认图片（可自定义）
  • ✅ 支持相对路径转绝对路径（社交平台强制要求绝对 URL）
  • ✅ 输出完整的 Open Graph + Twitter Card 标签
  • ✅ 兼容首页、分类页、独立页面

完整代码（复制即用）

将以下代码放置在 Typecho 主题的 header.php 文件中，紧挨着 </head> 标签之前（如果主题已有 <?php $this->options->customHeadEnd(); ?>，放在它的后面即可）。

<?php
// ========== 动态 Open Graph 与 Twitter Card ==========
// 默认值（首页、分类页等使用）
$og_title = $this->options->title;
$og_description = $this->options->description;
$default_og_image = 'https://你的域名/默认分享图.jpg';  // 请替换为实际图片 URL
$og_image = $default_og_image;
$og_url = $this->options->siteUrl;
$og_type = 'website';

// 如果是单页（文章或独立页面）
if ($this->is('single')) {
    $og_title = $this->title;
    
    // 描述：优先使用文章自定义字段 description，否则取内容前150字
    if ($this->fields->description) {
        $og_description = $this->fields->description;
    } else {
        // 使用 $this->text 而非 $this->content，避免 <!--more--> 截断
        $plainText = strip_tags($this->text);
        $og_description = mb_substr($plainText, 0, 150, 'UTF-8');
        if (mb_strlen($plainText, 'UTF-8') > 150) $og_description .= '…';
    }
    
    // 图片获取：优先使用自定义缩略图字段 thumb
    if ($this->fields->thumb) {
        $og_image = $this->fields->thumb;
    } else {
        // 匹配 Markdown 图片语法：![alt](url) 或 ![alt](url "title")
        preg_match('/!\[.*?\]\(([^)\s]+)(?:\s+["\'][^"\']*["\'])?\)/i', $this->text, $img);
        if (!empty($img[1])) {
            $og_image = $img[1];
        } else {
            // 如果 Markdown 没匹配到，尝试匹配 HTML img 标签（兼容富文本编辑器插入的图片）
            preg_match('/<img[^>]+src=["\']([^"\']+)["\']/i', $this->text, $html_img);
            if (!empty($html_img[1])) {
                $og_image = $html_img[1];
            }
        }
    }
    
    // 将相对路径转为绝对路径（社交平台要求绝对 URL）
    if (!empty($og_image) && strpos($og_image, 'http') !== 0 && strpos($og_image, '//') !== 0) {
        $og_image = rtrim($this->options->siteUrl, '/') . '/' . ltrim($og_image, '/');
    }
    
    // 如果还是没有图片，使用默认图片
    if (empty($og_image)) {
        $og_image = $default_og_image;
    }
    
    $og_url = $this->permalink;
    $og_type = 'article';
}
?>
<meta property="og:type" content="<?php echo htmlspecialchars($og_type); ?>">
<meta property="og:title" content="<?php echo htmlspecialchars($og_title); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($og_description); ?>">
<meta property="og:url" content="<?php echo htmlspecialchars($og_url); ?>">
<meta property="og:image" content="<?php echo htmlspecialchars($og_image); ?>">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="<?php $this->options->title(); ?>">
<meta property="og:locale" content="zh_CN">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($og_title); ?>">
<meta name="twitter:description" content="<?php echo htmlspecialchars($og_description); ?>">
<meta name="twitter:image" content="<?php echo htmlspecialchars($og_image); ?>">

使用前的准备工作

1. 准备一张默认分享图片

  • 尺寸：1200 × 630 像素（宽高比 1.91:1）
  • 格式：JPG 或 PNG
  • 大小：建议 < 100KB（微信限制较严）
  • 内容：网站 Logo、名称或代表性图案
  • 将图片上传到您的服务器，获得绝对 URL，例如 https://blog.ziyege.com/static/share.jpg

2. 修改代码中的默认图片 URL

找到代码开头的

php

$default_og_image = 'https://你的域名/默认分享图.jpg';

替换为您的实际图片地址。

3. （可选）为文章自定义缩略图或描述

  • 在 Typecho 编辑文章时，添加自定义字段：

    • 字段名：thumb，值：文章缩略图绝对 URL（优先级最高）
    • 字段名：description，值：自定义分享描述（若不填则自动截取正文）

常见问题解答

Q1：修改后没有生效？

  • 清除浏览器缓存（Ctrl+F5）
  • 如果使用 CDN，请刷新 CDN 缓存
  • 在网址后面加上https://你的域名/文章标题?t=202604091200或https://你的域名/文章标题?v=random123

Q2：文章里的图片是相对路径（如 /uploads/1.jpg），分享后不显示？

代码已经包含相对路径转绝对路径的逻辑，会自动补全域名。请确保 $this->options->siteUrl 设置正确（后台 → 基本设置 → 站点地址）。

Q3：文章图片使用了懒加载（data-src），正则匹配不到？

代码已兼容 HTML <img> 的 src 属性。如果您的主题将图片放在 data-src 中且没有 src，请修改正则匹配 data-src：

php

preg_match('/<img[^>]+data-src=["\']([^"\']+)["\']/i', $this->text, $html_img);

Q4：我不想用自动提取图片，只想每篇文章都用同一张默认图？

将 if ($this->is('single')) 内部的图片获取部分全部删除，直接赋值为默认图片即可：

php

$og_image = $default_og_image;

Q5：会影响网站速度吗？

完全不影响。这段代码仅在生成 HTML 头部时执行几次字符串操作，没有数据库查询或外部请求。

效果预览

配置完成后，在微信、QQ、Facebook 等平台分享您的文章链接，将看到类似如下的精美卡片：

20260409213545_1013_php5mm0fz

（实际显示效果取决于各平台规则）

结语

通过上述代码，您的 Typecho 博客在社交媒体上的呈现将更加专业、美观。无需安装任何插件，仅修改一个主题文件即可实现。如果遇到问题，欢迎在评论区留言交流。