WordPress Twitter Card添加

1. 先整明白Twitter Card是啥玩意儿。说白了就是当你在推特分享WordPress网站链接时，它能自动提取标题、摘要和缩略图，包装成一张信息丰富的卡片。没这功能的话，分享出去可能就剩个光秃秃的网址——寒碜！

2. 别慌，操作比想象中简单。核心原理是在网页里插入meta标签，Twitter的爬虫会来抓这些信息。WordPress的好处是能用函数自动生成内容，比如这样往主题函数文件里怼代码：

function add_twitter_card() {
    if(is_single()) {
        echo '<meta name="twitter:card" content="summary_large_image">';
        echo '<meta name="twitter:site" content="@你的推特账号">';
        echo '<meta name="twitter:title" content="' . get_the_title() . '">';
        echo '<meta name="twitter:description" content="' . wp_strip_all_tags(get_the_excerpt(), true) . '">';

        if(has_post_thumbnail()) {
            $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            echo '<meta name="twitter:image" content="' . esc_url($thumb[0]) . '">';
        }
    }
}
add_action('wp_head', 'add_twitter_card');

3. 注意看第二行的is_single()判断——这玩意儿确保只在文章页生效。要是全站都加卡片，首页分享出去可能抓取到奇怪的内容。曾经有人忘了加判断，结果分享公司官网时显示的是最新发布的打折内裤广告...

4. 图片处理有个坑。Twitter要求图片最小尺寸300x157像素，但实际测试发现上传2000px宽的图反而渲染更清晰。最好用wp_get_attachment_image_src获取原图而不是缩略图，不然移动端分享可能糊成马赛克。

5. 进阶玩法是结合Open Graph协议。其实推特会先找twitter:标签，找不到才降级用og:标签。所以更稳妥的做法是双重保险：

function add_og_meta() {
    if(is_single()) {
        echo '<meta property="og:title" content="' . get_the_title() . '" />';
        echo '<meta property="og:description" content="' . wp_strip_all_tags(get_the_excerpt(), true) . '" />';
        echo '<meta property="og:url" content="' . get_permalink() . '" />';
        if(has_post_thumbnail()) {
            $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
            echo '<meta property="og:image" content="' . esc_url($thumb[0]) . '" />';
        }
    }
}
add_action('wp_head', 'add_og_meta');

6. 测试工具必须用上。推特官方提供卡片验证器（https://cards-dev.twitter.com/validator），粘贴网址能实时预览效果。最骚的是它带缓存机制，修改后第一次测试可能显示旧数据，多点几次"Clear cache"才能刷出新效果。

7. 插件党也有出路。Yoast SEO或All in One SEO这类插件自带社交卡片设置，在文章编辑页下方直接填信息就行。但注意检查插件是否自动生成twitter:image标签——有些版本会抽风般忽略自定义图片。

8. 特殊内容类型要特殊处理。比如产品页面可能需要price标签，视频页面要player标签。这时候需要改判断条件：

if(is_product()) {
    echo '<meta name="twitter:card" content="product">';
    // 再从自定义字段提取价格信息
    $price = get_post_meta(get_the_ID(), '_product_price', true);
    echo '<meta name="twitter:data1" content="' . $price . '">';
}

9. 最后记得处理移动端适配。有些主题用JS动态加载内容，推特爬虫可能抓不到异步加载的图片。这时候要在functions.php里把关键图片用noscript标签包一层备用，防止机器人看不懂JavaScript而破防。

10. 其实最省事的方案是：装个Social Snap插件。但知道底层实现能让你在插件冲突时快速排查问题——比如那次经典案例：某个减肥食谱网站的分享卡片总是显示隔壁页面的电动工具图片，最终发现是缓存插件把meta标签缓存串了。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。