WordPress 自動生成 SEO 優化 Meta 標籤：關鍵字、描述與搜尋高亮完整實作

前言

Meta Keywords 與 Description 是 SEO 基礎要素。WordPress 無內建自動生成功能，本文提供完整 functions.php 方案，依頁面類型（首頁、文章、分類、標籤、搜尋、封存）智能生成差異化 Meta 標籤，並附贈搜尋結果關鍵字高亮功能，無需外掛即可達到專業 SEO 效果。

一、核心實作代碼（放入 functions.php）

<?php
// 掛鉤到 wp_head
add_action('wp_head', 'wp_keywords');
add_action('wp_head', 'wp_description');

/**
 * 自動生成 Meta Keywords
 */
function wp_keywords() {
    global $s, $post;
    $keywords = '';

    if (is_single()) {
        // 文章頁：標籤 + 分類
        if ($tags = get_the_tags($post->ID)) {
            foreach ($tags as $tag) {
                $keywords .= $tag->name . ', ';
            }
        }
        foreach (get_the_category($post->ID) as $cat) {
            $keywords .= $cat->cat_name . ', ';
        }
        $keywords = rtrim($keywords, ', ');
    } elseif (is_home() || is_front_page()) {
        $keywords = '首頁關鍵詞, 網站核心詞, 品牌詞'; // 自訂
    } elseif (is_tag()) {
        $keywords = single_tag_title('', false);
    } elseif (is_category()) {
        $keywords = single_cat_title('', false);
    } elseif (is_search()) {
        $keywords = esc_html($s);
    } else {
        $keywords = trim(wp_title('', false));
    }

    if ($keywords) {
        echo "\n";
    }
}

/**
 * 自動生成 Meta Description
 */
function wp_description() {
    global $s, $post;
    $description = '';
    $blog_name = get_bloginfo('name');

    if (is_singular()) {
        // 文章/頁面：優先用摘要，否則截取內容
        if (!empty($post->post_excerpt)) {
            $text = $post->post_excerpt;
        } else {
            $text = $post->post_content;
        }
        // 清理：移除標籤、實體、換行、多餘空白
        $description = trim(str_replace(
            array("\r\n", "\r", "\n", " ", "  "),
            " ",
            str_replace('"', "'", strip_tags($text))
        ));
        if (!$description) {
            $description = $blog_name . ' - ' . trim(wp_title('', false));
        }
    } elseif (is_home() || is_front_page()) {
        $description = $blog_name . ' - ' . get_bloginfo('description') . ' 首頁自訂描述';
    } elseif (is_tag()) {
        $description = $blog_name . ' 有關 \'' . single_tag_title('', false) . '\' 的文章';
    } elseif (is_category()) {
        $description = $blog_name . ' 有關 \'' . single_cat_title('', false) . '\' 的文章';
    } elseif (is_archive()) {
        $description = $blog_name . ' 在: \'' . trim(wp_title('', false)) . '\' 的文章';
    } elseif (is_search()) {
        $description = $blog_name . ': \'' . esc_html($s) . '\' 的搜尋結果';
    } else {
        $description = $blog_name . ' 有關 \'' . trim(wp_title('', false)) . '\' 的文章';
    }

    // 截取 220 字元（中文約 110 字），補充省略號
    $description = mb_substr($description, 0, 220, 'utf-8') . '..';
    echo "\n";
}
?>

二、頁面類型對應策略表

三、關鍵技術細節解析

1. 內容清理管線

$clean = trim(str_replace(
    array("\r\n", "\r", "\n", " ", "  "), // 統一空白
    " ",
    str_replace('"', "'", strip_tags($text))  // 移除 HTML、轉義引號
));

• strip_tags：移除所有 HTML 標籤，保留純文字
• str_replace('"', "'")：防止屬性值中斷
• 統一空白字元：避免換行/多空格導致截斷異常

2. 多語系安全截取

mb_substr($description, 0, 220, 'utf-8')

• 使用 mb_substr 而非 substr，正確處理多位元組字元
• 220 字元約等中文 110 字，符合搜尋引擎顯示長度

3. 條件標籤優先順序

is_singular() → is_single() || is_page() || is_attachment()
is_home() → 部落格首頁
is_front_page() → 靜態首頁（設定頁面）

注意順序：is_singular 包含 is_single，寫在前面避免邏輯遺漏。

四、搜尋結果關鍵字高亮（加分項）

/**
 * 搜尋結果標題與摘要高亮顯示搜尋詞
 */
function wps_highlight_results($text) {
    if (is_search()) {
        $search_query = get_query_var('s');
        if (!empty($search_query)) {
            // 分詞支援多關鍵字
            $keys = array_filter(array_map('trim', explode(' ', $search_query)));
            if ($keys) {
                $pattern = '/(' . implode('|', array_map('preg_quote', $keys)) . ')/iu';
                $text = preg_replace($pattern, '$1', $text);
            }
        }
    }
    return $text;
}

add_filter('the_excerpt', 'wps_highlight_results');
add_filter('the_title', 'wps_highlight_results');

CSS 樣式建議

.search-highlight {
    background: #fff3cd;
    color: #856404;
    padding: 0 2px;
    border-radius: 2px;
}

五、進階優化建議

1. 自訂欄位覆蓋：檢查 get_post_meta($post->ID, '_seo_keywords', true) 允許手動覆蓋
2. Open Graph / Twitter Card：同步輸出 og:title、og:description、og:image
3. Schema.org 結構化資料：輸出 Article、BreadcrumbList JSON-LD
4. 動態標題優化：wp_title 過濾器自訂「文章標題 | 分類 | 站點名」格式
5. XML Sitemap：搭配 Yoast SEO 或自建 sitemap.xml 生成

六、驗證與測試

1. 瀏覽各類型頁面 → View Source → 搜尋 meta name="keywords" / description
2. Google Search Console → URL 檢查 → 查看抓取的 Meta 標籤
3. 搜尋站內關鍵字 → 確認高亮顯示正常
4. 社群分享測試：Facebook Debugger、Twitter Card Validator

七、結語

自動生成 Meta 標籤是 WordPress SEO 基建第一步。本文方案零依賴、效能極佳（無額外查詢）、邏輯完整覆蓋所有頁面類型。配合搜尋高亮、Open Graph、Schema.org，可構建企業級 SEO 基礎設施。建議將代碼模組化為 inc/seo.php 並納入版本控制，持續迭代優化。