第十三章 SEO結構化數據與SERP 详情 - 前端,seo 溪抱魚日志

SEO結構化數據與SERP

1. 初解SEO結構化數據與SERP

結構化數據是一種標準化的格式，用於向搜索引擎提供關於網頁內容的明確信息。它本質上是一種"標記語言"，通過特定的代碼格式，幫助搜索引擎理解網頁內容的上下文和含義。

SERP是"Search Engine Results Page"的縮寫，即搜索引擎結果頁面。當用户在搜索引擎（如Google、百度、必應等）中輸入查詢詞後，搜索引擎返回的結果頁面就是SERP。

1.1 SERP的組成部分

SERP通常包含以下幾個主要部分：

1.2 結構化數據與SERP以及排名的關係

結構化數據只是在技術側實現特殊SERP或富文本結果的一種方式而已。

在SEO領域，結構化數據的作用主要是幫助搜索引擎更好地理解網頁內容，並可能在搜索結果中顯示為富文本結果（Rich Snippets）或特殊的SERP展示形式，而不是直接提升關鍵詞排名/

它的間接主要是指的這幾個方面：

1.3 常見的結構化數據類型

資料來源

2. 詳解SERP展示形式和結構化數據

我們可以直接通過實際例子來理解SERP展示形式

在上圖中只需要關注連接到域名的 SERP。

不鏈接到域名的 SERP 是指的那些在搜索引擎結果頁面 (SERP) 上顯示的特殊元素，它們展示了與搜索查詢相關的信息，但這些元素並不直接鏈接到您的網站域名。這些特性通常由搜索引擎從多個來源（包括您的網站和其他網站）聚合信息後生成。

舉個例子：

示例查詢： 搜索“如何製作紅燒肉”
SERP 顯示：

搜索結果頂部會顯示一個框，直接列出紅燒肉的製作步驟。雖然內容可能摘自您的食譜網站，但許多用户看到這些步驟後就不再點擊進入原網站，框底部雖然有您網站的鏈接，但點擊率通常較低。

那麼接下來就看看連接到域名的 SERP 的詳解。

2.1. Featured Snippet（特色摘要）

Featured Snippet（特色摘要）是Google搜索結果中的一個突出顯示的內容框，通常出現在搜索結果的頂部，位於付費廣告之下但在自然搜索結果之上。這個位置也被稱為"Position Zero"（零位置），因為它位於傳統的第一位搜索結果之前。

比如我們去Google上面搜索這個問題

如圖就是它的顯示結果的顯示，上面直接顯示回答，下面顯示來源網站。

而對於它的JSON結構數據來説是這樣表示的，這是由AI生成的Answer：

{
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
          {
              "@type": "Question",
              "name": "is little caesars pizza open on christmas",
              "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "Unfortunately, it is not. Little Caesars Pizza follows the standard holiday hours of most businesses, meaning that they will be closed on Christmas Day. However, they will be open on Christmas Eve and New Year's Day."
              }
          }
      ]
  }

2.2 Sitelinks

Sitelinks（站點鏈接）是Google搜索結果中顯示在主要搜索結果下方的額外鏈接，這些鏈接直接指向網站的特定頁面。Sitelinks的目的是幫助用户快速導航到網站的重要部分，提高用户體驗並節省時間。

在Google搜索結果中，Sitelinks通常有以下幾種展示形式：

我們並不用額外關注這個，至少在結構化數據這一板塊是，因為這並不由結構化數據控制，完全是由Google的算法控制。

2.3 AI OVERVIEW

AI Overview（AI 概覽）是Google搜索結果中的一種新型展示形式，它利用AI為用户提供更全面、更直接的答案。比如這樣：

不同點在於：

AI生成的綜合回答：不同於傳統的Featured Snippet（僅從單一網頁提取內容），AI Overview會綜合多個來源的信息，生成更全面的回答。
引用來源：回答下方通常會列出多個信息來源，用户可以點擊查看原始內容，也可能只有一個。
交互式體驗：用户可以點擊"提出後續問題"按鈕，與AI進行進一步的對話。
多媒體內容：有時會包含相關圖片、視頻或其他視覺元素。

它主要跟內容、經驗，專業知識，權威，可信賴這些有關，並不合特定的結構化數據有關。

2.4 Review

Review（評論）結構化數據是一種用於標記產品、服務、企業或其他實體評論信息的Schema.org標記。當網站正確實現Review結構化數據時，Google會在搜索結果中顯示評分星級、評論數量等信息。

Review結構化數據在搜索結果中的主要展示形式包括：

星級評分：通常以五星制顯示，反映產品或服務的平均評分。
評論數量：顯示已提交的評論總數。
評分範圍：有時會顯示最低和最高評分。
評論摘錄：有時會顯示一條代表性評論的簡短摘錄。

單Review結構是這樣的：

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "超級舒適枕頭",
  "image": "https://example.com/photos/pillows/comfort-pillow.jpg",
  "description": "這款超級舒適枕頭採用記憶棉材質，提供卓越的頸部支撐。",
  "brand": {
    "@type": "Brand",
    "name": "舒眠家居"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/pillows/comfort-pillow",
    "priceCurrency": "CNY",
    "price": "199.00",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "127"
  },
  "review": [
    {
      "@type": "Review",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      },
      "author": {
        "@type": "Person",
        "name": "張先生"
      },
      "datePublished": "2023-08-15",
      "reviewBody": "這是我用過的最舒適的枕頭，頸椎痛的問題完全解決了！"
    },
    {
      "@type": "Review",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "4",
        "bestRating": "5"
      },
      "author": {
        "@type": "Person",
        "name": "李女士"
      },
      "datePublished": "2023-07-22",
      "reviewBody": "枕頭質量很好，但稍微有點高，需要適應幾天。"
    }
  ]
}

2.5 Image和Image Pack

Image和Image Pack是Google搜索結果中與圖片相關的兩種不同展示形式。

Image（圖片）結構化數據

Image結構化數據幫助搜索引擎更好地理解網頁上的圖片內容，提高圖片在Google圖片搜索中的可見性，並可以使圖片在常規搜索結果中以特殊方式顯示。

基本的Image結構化數據示例：

{
  "@context": "https://schema.org/",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/photos/1x1/photo.jpg",
  "creator": {
    "@type": "Person",
    "name": "張三"
  },
  "datePublished": "2023-01-18",
  "description": "上海外灘夜景全景照",
  "name": "上海外灘夜景"
}

Image Pack（圖片包）

Image Pack是Google搜索結果中的一組相關圖片集合，通常顯示在搜索結果頁面的頂部或中間位置。當用户搜索特定主題時，Google可能會顯示與該主題相關的多張圖片。

您提出了一個很好的問題。確實，即使正確添加了 ImageObject 結構化數據，圖片也不一定會在搜索結果中以特殊方式展示或出現在 Image Pack 中。這是因為：

ImageObject結構化數據後圖片可能不會展示在搜索結果中

提高圖片展示機會的建議

記住，結構化數據是提高圖片在搜索結果中可見性的工具之一，但不是唯一因素。也需要綜合優化網站的各個方面。

3. 複合型結構化數據

複合型結構化數據是指在一個結構化數據塊中組合多種Schema.org類型和屬性，以創建更全面、更豐富的數據表示。這種方法可以幫助搜索引擎更全面地理解網頁內容，並在搜索結果中顯示更多信息。

3.1 Talkie案例分析

我們看看Talkie的JSON結構實現和搜索結果示例：

{
  "@type": "SoftwareApplication",
  "url": "https://www.talkie-ai.com/chat/tity-136736747602065",
  "name": "Chat with Tity - text or voice, Enjoy AI Chat Free & Safe",
  "description": "Enjoy best realistic AI chat by text & voice with Tity:\"bdjdjdj\"",
  "operatingSystem": "Web",
  "applicationCategory": "MultimediaApplication",
  "applicationSubCategory": "AI Chat",
  "image": "https://cdn.talkie-ai.com/image_inference_output/talkie/prod/img/2024-04-20/e355a542-5200-4822-bcab-7674070a754f.jpeg?x-oss-process=image/resize,w_1024/format,webp",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.6",
    "bestRating": "5",
    "ratingCount": 55508
  },
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
    // ... 其他屬性
}

在這個例子中，Talkie巧妙地結合了以下幾種結構化數據類型：

核心類型：SoftwareApplication

定義了基本的聊天頁信息：名稱、描述、操作系統等
適用於描述AI聊天頁的基本屬性

嵌套的評分信息：AggregateRating

顯示聊天頁的平均評分(4.6/5)和評分數量(55508)
這部分數據使搜索結果中顯示星級評分

價格信息：Offer

明確標示聊天頁是免費的("price": "0")
在搜索結果中顯示"免費"標籤

創建者信息：Person

標識聊天頁的創建者
增加內容的可信度

提供者信息：Organization

標識聊天頁的提供組織
建立品牌關聯

互動統計：InteractionStatistic
1. 記錄用户互動數據
2. 向搜索引擎傳達聊天頁的受歡迎程度

3.2 複合型結構化數據的優勢

3.3 實施複合型結構化數據的最佳實踐

4 場景

電子商務產品頁面

結合Product、Offer、AggregateRating和Review
顯示價格、庫存狀態、評分和評論

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能手機 XYZ Pro - 高性能旗艦手機</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #3498db;
        }

        .nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        .nav a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav a:hover {
            color: #3498db;
        }

        .product-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 40px;
            background: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .product-images {
            position: relative;
        }

        .main-image {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .thumbnail-container {
            display: flex;
            gap: 10px;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            cursor: pointer;
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.3s;
        }

        .thumbnail:hover, .thumbnail.active {
            border-color: #3498db;
        }

        .product-info h1 {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .product-meta {
            margin-bottom: 20px;
        }

        .product-id {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .rating-container {
            display: flex;
            align-items: center;
            margin: 15px 0;
            gap: 10px;
        }

        .stars {
            color: #f39c12;
            font-size: 1.2rem;
        }

        .rating-count {
            color: #3498db;
            font-weight: 500;
            cursor: pointer;
        }

        .price-container {
            margin: 25px 0;
        }

        .price {
            font-size: 2rem;
            font-weight: 700;
            color: #e74c3c;
        }

        .original-price {
            text-decoration: line-through;
            color: #7f8c8d;
            margin-left: 10px;
        }

        .discount {
            background: #e74c3c;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-left: 10px;
        }

        .stock {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: 500;
            margin: 15px 0;
        }

        .in-stock {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .low-stock {
            background: #fff3e0;
            color: #ef6c00;
        }

        .out-of-stock {
            background: #ffebee;
            color: #c62828;
        }

        .product-description {
            margin: 25px 0;
            line-height: 1.8;
        }

        .features-list {
            margin: 20px 0;
            padding-left: 20px;
        }

        .features-list li {
            margin-bottom: 10px;
        }

        .cta-buttons {
            display: flex;
            gap: 15px;
            margin: 30px 0;
        }

        .btn {
            padding: 12px 25px;
            border-radius: 5px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            font-size: 1rem;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-secondary {
            background: #ecf0f1;
            color: #2c3e50;
        }

        .btn-secondary:hover {
            background: #bdc3c7;
        }

        .reviews-section {
            margin-top: 60px;
        }

        .section-title {
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: #2c3e50;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 10px;
        }

        .review {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .reviewer {
            font-weight: 600;
        }

        .review-date {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .review-rating {
            color: #f39c12;
            margin-bottom: 10px;
        }

        .review-content {
            line-height: 1.7;
        }

        .review-title {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        @media (max-width: 768px) {
            .product-container {
                grid-template-columns: 1fr;
            }

            .cta-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">科技商城</div>
                <nav class="nav">
                    <ul>
                        <li><a href="#">首頁</a></li>
                        <li><a href="#">手機</a></li>
                        <li><a href="#">電腦</a></li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">聯繫我們</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main class="container">
        <div class="product-container" itemscope itemtype="https://schema.org/Product">
            <div class="product-images">
                <img src="https://via.placeholder.com/500x500" alt="智能手機 XYZ Pro" class="main-image" itemprop="image">
                <div class="thumbnail-container">
                    <img src="https://via.placeholder.com/100x100" alt="智能手機 XYZ Pro - 視圖1" class="thumbnail active">
                    <img src="https://via.placeholder.com/100x100" alt="智能手機 XYZ Pro - 視圖2" class="thumbnail">
                    <img src="https://via.placeholder.com/100x100" alt="智能手機 XYZ Pro - 視圖3" class="thumbnail">
                    <img src="https://via.placeholder.com/100x100" alt="智能手機 XYZ Pro - 視圖4" class="thumbnail">
                </div>
            </div>

            <div class="product-info">
                <h1 itemprop="name">智能手機 XYZ Pro - 高性能旗艦手機</h1>
                <div class="product-meta">
                    <span class="product-id">產品編號: <span itemprop="sku">XYZ-PRO-128GB</span></span>
                </div>

                <div class="rating-container">
                    <div class="stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
                        ★★★★☆
                        <meta itemprop="ratingValue" content="4.5">
                        <meta itemprop="bestRating" content="5">
                        <meta itemprop="worstRating" content="1">
                    </div>
                    <span class="rating-count">
                        <span itemprop="reviewCount">128</span>條評論
                    </span>
                </div>

                <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                    <div class="price-container">
                        <span class="price" itemprop="price" content="4999.00">¥4,999.00</span>
                        <span class="original-price">¥5,999.00</span>
                        <span class="discount">-17%</span>
                        <meta itemprop="priceCurrency" content="CNY">
                    </div>

                    <div class="stock in-stock" itemprop="availability" content="https://schema.org/InStock">
                        有貨 - 24小時內發貨
                    </div>
                </div>

                <div class="product-description" itemprop="description">
                    <p>XYZ Pro 是我們最新推出的旗艦智能手機，採用頂級處理器和先進的攝像系統，為您帶來卓越的性能和拍攝體驗。6.7英寸的超視網膜XDR顯示屏提供令人驚豔的視覺效果，而全天候的電池續航則確保您的設備可以持續使用整天。</p>
                </div>

                <ul class="features-list">
                    <li>6.7英寸超視網膜XDR顯示屏</li>
                    <li>最新旗艦處理器，性能提升50%</li>
                    <li>三攝系統：廣角、超廣角和長焦鏡頭</li>
                    <li>8GB RAM + 128GB 存儲空間</li>
                    <li>全天候電池續航能力</li>
                    <li>IP68防水防塵</li>
                </ul>

                <div class="cta-buttons">
                    <button class="btn btn-primary">立即購買</button>
                    <button class="btn btn-secondary">加入購物車</button>
                </div>
            </div>
        </div>

        <section class="reviews-section">
            <h2 class="section-title">用户評論</h2>
            
            <div class="review" itemprop="review" itemscope itemtype="https://schema.org/Review">
                <div class="review-header">
                    <span class="reviewer" itemprop="author">張先生</span>
                    <span class="review-date" itemprop="datePublished">2023-10-15</span>
                </div>
                <div class="review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                    ★★★★★
                    <meta itemprop="ratingValue" content="5">
                    <meta itemprop="bestRating" content="5">
                </div>
                <h3 class="review-title" itemprop="name">超出預期的旗艦手機</h3>
                <div class="review-content" itemprop="reviewBody">
                    <p>這款手機的性能真的很出色，特別是攝像頭系統，拍照效果非常驚豔。電池續航也很給力，重度使用一整天都沒問題。屏幕顯示效果細膩，色彩還原度高。總體來説，這是我用過的最好的手機之一，值得推薦！</p>
                </div>
            </div>

            <div class="review" itemprop="review" itemscope itemtype="https://schema.org/Review">
                <div class="review-header">
                    <span class="reviewer" itemprop="author">李女士</span>
                    <span class="review-date" itemprop="datePublished">2023-09-28</span>
                </div>
                <div class="review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                    ★★★★☆
                    <meta itemprop="ratingValue" content="4">
                    <meta itemprop="bestRating" content="5">
                </div>
                <h3 class="review-title" itemprop="name">性價比高，但有小缺點</h3>
                <div class="review-content" itemprop="reviewBody">
                    <p>手機整體表現不錯，特別是處理器性能很強勁，玩遊戲完全沒有卡頓。拍照也很清晰，尤其是夜景模式效果驚豔。唯一的缺點是充電速度不夠快，希望下一代產品能改進這一點。不過總體來説，這個價位能買到這樣的手機已經很滿意了。</p>
                </div>
            </div>

            <div class="review" itemprop="review" itemscope itemtype="https://schema.org/Review">
                <div class="review-header">
                    <span class="reviewer" itemprop="author">王先生</span>
                    <span class="review-date" itemprop="datePublished">2023-10-02</span>
                </div>
                <div class="review-rating" itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                    ★★★★★
                    <meta itemprop="ratingValue" content="5">
                    <meta itemprop="bestRating" content="5">
                </div>
                <h3 class="review-title" itemprop="name">專業攝影愛好者的選擇</h3>
                <div class="review-content" itemprop="reviewBody">
                    <p>作為一名攝影愛好者，我對手機的拍照功能要求很高。這款XYZ Pro的相機系統令我非常驚喜，尤其是長焦鏡頭的表現堪比專業相機。夜景模式下的噪點控制也做得相當出色。系統流暢度和電池續航也都令人滿意。總之，這是一款非常均衡的旗艦手機。</p>
                </div>
            </div>
        </section>
    </main>

    <script>
        // 簡單的縮略圖切換功能
        document.querySelectorAll('.thumbnail').forEach(thumb => {
            thumb.addEventListener('click', function() {
                // 移除所有active類
                document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
                // 為當前點擊的縮略圖添加active類
                this.classList.add('active');
                // 更新主圖
                document.querySelector('.main-image').src = this.src.replace('100x100', '500x500');
            });
        });
    </script>
</body>
</html>

內容創作平台

結合Article、Person(作者)和Organization(出版商)
增強內容的可信度和權威性

關於我的一些介紹

溪抱魚日志

@ailvyoudetiebanshao

标签

前端 (1157)

程序員 (231)

typescript (130)

HTML (113)

面試 (72)

seo (33)

前端工程化 (32)

前端設計 (24)

react-native (23)

next.js (22)

設計 (15)

獨立開發者 (12)

动态

第十三章 SEO結構化數據與SERP - 动态详情

SEO結構化數據與SERP

1. 初解SEO結構化數據與SERP

1.1 SERP的組成部分

1.2 結構化數據與SERP以及排名的關係

1.3 常見的結構化數據類型

2. 詳解SERP展示形式和結構化數據

舉個例子：

2.1. Featured Snippet（特色摘要）

2.2 Sitelinks

2.3 AI OVERVIEW

2.4 Review

2.5 Image和Image Pack

Image（圖片）結構化數據

Image Pack（圖片包）

ImageObject結構化數據後圖片可能不會展示在搜索結果中

提高圖片展示機會的建議

3. 複合型結構化數據

3.1 Talkie案例分析

3.2 複合型結構化數據的優勢

3.3 實施複合型結構化數據的最佳實踐

4 場景

Add a new 评论

溪抱魚 日志

@ailvyoudetiebanshao

标签

前端 (1157)

程序員 (231)

typescript (130)

HTML (113)

面試 (72)

seo (33)

前端工程化 (32)

前端設計 (24)

react-native (23)

next.js (22)

設計 (15)

獨立開發者 (12)

动态

第十三章 SEO結構化數據與SERP - 动态 详情

SEO結構化數據與SERP

1. 初解SEO結構化數據與SERP

1.1 SERP的組成部分

1.2 結構化數據與SERP以及排名的關係

1.3 常見的結構化數據類型

2. 詳解SERP展示形式和結構化數據

舉個例子：

2.1. Featured Snippet（特色摘要）

2.2 Sitelinks

2.3 AI OVERVIEW

2.4 Review

2.5 Image和Image Pack

Image（圖片）結構化數據

Image Pack（圖片包）

ImageObject結構化數據後圖片可能不會展示在搜索結果中

提高圖片展示機會的建議

3. 複合型結構化數據

3.1 Talkie案例分析

3.2 複合型結構化數據的優勢

3.3 實施複合型結構化數據的最佳實踐

4 場景

Add a new 评论

溪抱魚日志

第十三章 SEO結構化數據與SERP - 动态详情