博客 / WordPress 教程

一份完整的WordPress SEO meta标签解决方案

完整的WordPress SEO meta标签解决方案，包含不同页面类型的meta标签结构，并封装成函数。以下是详细代码和说明：

<?php
// 在主题的 functions.php 中添加以下代码

function my_custom_seo_meta_tags() {
    // 获取全局变量
    global $post, $wp_query;
    
    // 定义默认值
    $default_image = get_template_directory_uri() . '/images/logo.png'; // 默认图片
    $site_name = get_bloginfo('name');
    $site_description = get_bloginfo('description');
    $site_url = home_url('/');
    
    // 初始化 meta 数据
    $meta = array(
        'title' => '',
        'description' => '',
        'og_type' => 'website',
        'og_image' => $default_image,
        'og_url' => '',
        'og_title' => '',
        'og_description' => '',
        'twitter_card' => 'summary_large_image'
    );
    
    // 场景判断
    if (is_front_page() || is_home()) {
        // 首页
        $meta['title'] = $site_name . ' - ' . $site_description;
        $meta['description'] = $site_description ? $site_description : '欢迎访问' . $site_name;
        $meta['og_type'] = 'website';
        $meta['og_url'] = $site_url;
        $meta['og_title'] = $meta['title'];
        $meta['og_description'] = $meta['description'];
        
    } elseif (is_page()) {
        // 页面
        $meta['title'] = get_the_title() . ' - ' . $site_name;
        $meta['description'] = get_post_meta($post->ID, '_yoast_wpseo_metadesc', true); // 支持 Yoast 自定义描述
        if (empty($meta['description'])) {
            $meta['description'] = wp_trim_words(get_the_excerpt(), 55, '...'); // 取摘要或内容前55字
        }
        $meta['og_type'] = 'article';
        $meta['og_url'] = get_permalink();
        $meta['og_title'] = $meta['title'];
        $meta['og_description'] = $meta['description'];
        
        // 获取特色图片
        if (has_post_thumbnail($post->ID)) {
            $meta['og_image'] = get_the_post_thumbnail_url($post->ID, 'full');
        }
        
    } elseif (is_single()) {
        // 文章
        $meta['title'] = get_the_title() . ' - ' . $site_name;
        $meta['description'] = get_post_meta($post->ID, '_yoast_wpseo_metadesc', true);
        if (empty($meta['description'])) {
            $meta['description'] = wp_trim_words(get_the_excerpt(), 55, '...');
        }
        $meta['og_type'] = 'article';
        $meta['og_url'] = get_permalink();
        $meta['og_title'] = $meta['title'];
        $meta['og_description'] = $meta['description'];
        
        // 获取特色图片
        if (has_post_thumbnail($post->ID)) {
            $meta['og_image'] = get_the_post_thumbnail_url($post->ID, 'full');
        }
        
    } elseif (is_category()) {
        // 分类页面
        $category = get_queried_object();
        $meta['title'] = single_cat_title('', false) . ' - ' . $site_name;
        $meta['description'] = category_description() ? wp_trim_words(strip_tags(category_description()), 55, '...') : '查看' . single_cat_title('', false) . '相关内容';
        $meta['og_type'] = 'website';
        $meta['og_url'] = get_category_link($category->term_id);
        $meta['og_title'] = $meta['title'];
        $meta['og_description'] = $meta['description'];
        
    } else {
        // 其他情况（比如存档页、搜索页）
        $meta['title'] = wp_title('-', false, 'right') . $site_name;
        $meta['description'] = $site_description;
        $meta['og_url'] = $site_url;
        $meta['og_title'] = $meta['title'];
        $meta['og_description'] = $meta['description'];
    }
    
    // 清理和转义
    $meta['title'] = esc_attr(wp_strip_all_tags($meta['title']));
    $meta['description'] = esc_attr(wp_strip_all_tags($meta['description']));
    $meta['og_title'] = esc_attr(wp_strip_all_tags($meta['og_title']));
    $meta['og_description'] = esc_attr(wp_strip_all_tags($meta['og_description']));
    
    // 输出 meta 标签
    ?>
    <title><?php echo $meta['title']; ?></title>
    <meta name="description" content="<?php echo $meta['description']; ?>">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="<?php echo $meta['og_title']; ?>">
    <meta property="og:description" content="<?php echo $meta['og_description']; ?>">
    <meta property="og:type" content="<?php echo $meta['og_type']; ?>">
    <meta property="og:url" content="<?php echo esc_url($meta['og_url']); ?>">
    <meta property="og:image" content="<?php echo esc_url($meta['og_image']); ?>">
    <meta property="og:site_name" content="<?php echo esc_attr($site_name); ?>">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="<?php echo $meta['twitter_card']; ?>">
    <meta name="twitter:title" content="<?php echo $meta['og_title']; ?>">
    <meta name="twitter:description" content="<?php echo $meta['og_description']; ?>">
    <meta name="twitter:image" content="<?php echo esc_url($meta['og_image']); ?>">
    
    <!-- 其他推荐的 SEO meta 标签 -->
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <?php
}

// 将 meta 标签添加到头部
add_action('wp_head', 'my_custom_seo_meta_tags', 1);

说明：

  1. 场景区分：
    • 首页：使用站点名称和描述，适合品牌展示。
    • 页面（Page）：优先使用 Yoast SEO 的自定义描述（如果存在），否则截取摘要或内容前55字。特色图片作为 og:image，fallback 到默认图片。
    • 文章（Post）：与页面类似，优先 Yoast 描述，特色图片优先。
    • 分类页（Category）：使用分类名称和描述（若无描述则生成默认描述）。
    • 其他页面：使用 WordPress 默认标题和站点描述。
  2. 封装为函数：
    • 代码封装在 my_custom_seo_meta_tags 函数中，通过 wp_head 钩子自动输出到 <head>。
    • 结构清晰，易于维护和扩展。
  3. og:image 处理：
    • 对于 Page 和 Post，如果有特色图片（Featured Image），使用其完整尺寸 URL。
    • 如果没有特色图片，使用默认图片（logo.png，需放在主题目录的 images 文件夹下）。
    • 分类页和首页默认使用 logo.png。
  4. 其他特点：
    • 支持 Open Graph 和 Twitter Card 协议，优化社交媒体分享。
    • 包含基本的 viewport 和 robots meta 标签。
    • 数据经过转义（esc_attr、esc_url）确保安全。
    • 兼容 Yoast SEO 的自定义 meta 描述（若之前使用过）。

使用方法：

  1. 将代码添加到主题的 functions.php 文件中。
  2. 确保主题目录下有 images/logo.png 作为默认图片，或修改 $default_image 路径。
  3. 如果需要自定义其他页面类型（如标签页、自定义 пост类型），可以在 elseif 分支中添加逻辑。

注意事项：

  • 如果站点没有特色图片，需确保默认图片路径有效。
  • 描述长度控制在 55 字（约 160 字符），符合 SEO 最佳实践。
  • 可根据需要调整 meta 标签的优先级（通过 add_action 的第三个参数）。

评论留言

您的邮箱地址不会被公开。 必填项已用 * 标注