在 WordPress 上實現模式標記的快速指南

已發表: 2020-05-13

您推出了一個外觀漂亮、功能強大的網站。 下一個是什麼？ 使其內容在搜索引擎上排名以帶來自然流量，使其對 SEO 友好。 這可能看起來有點困難，因為您必須了解許多技術元素，儘管它們不容易消化。 但是，如果您認真對待您網站的 SEO，您將需要對所有與 SEO 相關的主題有一個整體的看法。 一個這樣的主題是實現模式標記。

多年來，Scheme Markup 和結構化數據在 SEO 中發揮了很好的作用，而且 Google、Bing、Yahoo 等主要搜索引擎似乎都在推薦它們。 但究竟什麼是模式標記，它如何影響您網站的 SEO 過程？ 閱讀本文後，您將確切知道它是什麼，它如何影響 SEO 和搜索引擎，如何正確實施它以獲得更好的排名。

目錄

什麼是結構化數據和模式標記？

結構化數據是一種可以普遍理解的信息格式。 它包含不同的元素，使搜索引擎能夠輕鬆地了解頁面的全部內容。

雖然架構標記基本上是將您的網站放在搜索引擎上的代碼。 其主要目的是使搜索引擎為用戶提供更多信息。

它可以以代碼的形式添加到您的網頁中，以定義不同的元素，例如日期、圖像、營業時間等等。

SEO中架構標記的好處

在 SEO 方面，模式標記中表示的結構化數據以更詳細和信息豐富的方式顯示搜索引擎結果。 它不僅使網站對 SEO 更加友好，而且還可以顯示豐富的結果以吸引更多的網站流量。

搜索引擎中顯示的不同類型的豐富結果

之前，我們討論了模式標記在搜索引擎上顯示豐富結果的好處。 如果在您的網站上實施了架構標記，以下是一些將在搜索引擎中顯示的豐富結果。

豐富的片段

實施模式標記

豐富片段是那些在搜索結果中顯示時包含額外信息（如評級、評論、圖像等）的結果。 它將幫助用戶更多地了解頁面/帖子，並提供更多獲得點擊的機會。

豐富的卡片

實施模式標記

豐富的卡片是在搜索引擎中顯示結果的新格式。 就像豐富的片段一樣，豐富的卡片使用架構標記以更具吸引力和視覺吸引力的格式顯示搜索結果。 它專注於提供更好的移動搜索體驗，並帶有觸摸友好的滑動選項。

知識圖譜

知識圖譜是搜索引擎中使用的知識庫，通過顯示圖像、位置、聯繫信息、描述、社交媒體資料，使信息更加詳細。

精選片段

實施模式標記

Featured Snippets 是一種搜索引擎格式，可以為用戶的問題提供直接答案。 它們不包含任何其他信息，例如豐富的摘要，而是為用戶提供簡潔的答案，而無需單擊特定結果。

如何開始在我的網頁上實施模式標記？

您可以通過不同的方式實現模式標記。 以下是其中的一些：

使用微數據添加模式：

微數據是 HTML5 引入的一組標籤，旨在提供一種使用機器可讀標籤註釋 HTML 元素的簡單方法。 使用標記對初學者來說很容易實現。 但缺點是您需要在網頁正文中單獨標記每個項目，這可能會變得混亂。

但在我們開始之前，您需要確定您的網頁定義的項目類型。 它將幫助您確定需要使用的標籤類型。

在這裡，我們假設您擁有一個名為 HashThemes 的在線商店，其主頁可能如下所示： 

 <div>
<h1>哈希主題</h1>
<h2>最好的 WordPress 主題賣家！</h2>
<p>地址：</p>
<p>多比哈特</p>
<p>尼泊爾拉利特布爾</p>
<p>電子郵件：[email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">點擊這裡查看我們最好的 WordPress 主題！</a></p>
<p>我們開門了：</p>
<p>週一至週五上午 10 點至下午 6 點</p>
</div>

首先，您需要識別網頁的各個部分。 它是 <div> 標籤之間的所有內容。 所以，我們添加

 <div 項目範圍>

通過添加項目範圍標籤，我們可以指定包含在 <div> 標籤塊之間的 HTML 來引用特定項目。

現在，我們將使用項目類型屬性來指定頁面上項目的類型。 

 <div itemscope itemtype = "http://schema.org/wordpressthemes">

現在，轉到主頁並標記具有您網站名稱的網頁部分。 在這裡，我們將添加一個項目屬性標籤，用於標記項目的屬性。 

 <h1 itemprop="name">哈希主題</h1>

繼續為其餘頁面添加標籤。

有時，您可能不需要標記整行，而是在電子郵件地址行中引用屬性的行的一部分。 

 <h2 itemprop="description">最好的 WordPress 主題賣家！</h2>
<p>地址：</p>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress">多比哈特</p>
<p itemprop="addressLocality">拉利特布爾，尼泊爾</p></span>
<p>電子郵件：<span itemprop="email">[email protected]</span></p>
<p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">點擊這裡查看我們最好的 WordPress 主題！</a></p>
<p>我們開門了：</p>
<p itemprop="openingHours">週一至週五上午 10 點至下午 6 點</p>
</div>

您還可以使用 Google 結構化數據標記助手來更輕鬆地標記您的網頁。

使用 RDFa 添加標記

屬性中的資源描述框架 (RDFa) 是 HTML5 的擴展，旨在幫助您標記結構化數據。 它是 W3C 推薦的，可用於組合多個結構化數據詞彙表，以添加超出 Schema.org 的結構化數據

如果您知道如何在 Schema.org 中使用 Microdata 標記，RDFa 也不會有所不同。 它將現有的 HTML 集成到內容的正文中。

讓我們以上述電子商務網站為例： 

 <div>
<h1>哈希主題</h1>
<h2>最好的 WordPress 主題賣家！</h2>
<p>地址：</p>
<p>多比哈特</p>
<p>尼泊爾拉利特布爾</p>
<p>電子郵件：[email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">點擊這裡查看我們最好的 WordPress 主題！</a></p>
<p>我們開門了：</p>
<p>週一至週五上午 10 點至下午 6 點</p>
</div>

在這裡，我們將與 URL http://schema.org/ 一起指定標籤 vocab。 頁麵類型由標籤類型定義。 

 <div vocab="http://schema.org/" typeof="store">

我們現在已經告訴搜索引擎該頁面是關於什麼的。 現在是時候使用屬性屬性來定義屬性了。 

 <h1 property="name">哈希主題</h1>

屬性的類型也可以用來定義屬性，就像定義 PostalAddress 一樣。 

 <div property="address" typeof="PostalAddress">

屬性的類型相當於 Microdata 中的項目類型，而屬性相當於項目的 prop 屬性。 

 <h2 property="description">最好的 WordPress 主題賣家！</h2>
<p>地址：</p>
<div property="address" typeof="PostalAddress">
<p property="streetAddress">多比哈特</p>
<p property="addressLocality">尼泊爾拉利特布爾</p>
</div>
<p>電子郵件：<span property="email">[email protected]</span></p>
<p><a property="store" href="https://hashthemes.com/wordpress-theme/">點擊這裡查看我們最好的 WordPress 主題！</a></p>
<p>我們開門了：</p>
<p property="openingHours">週一至週五上午 10 點至下午 6 點</p>
</div>

使用 JSON-LD 標記網頁

用於鏈接數據的 JavaScript 對象表示法 (JSON-LD) 是使用 JSON 對鏈接數據進行編碼。 它是 W3C 的推薦格式，並於 2013 年被添加為 Schema.org 的推薦格式。

將 JSON-LD 用於 Schema Markup 的主要優點是它將最相關的代碼限制在頁面標題中，並將額外的標籤排除在內容的主體之外。 這使代碼更清晰，更易於閱讀。

JSON – LD 表示法包含在腳本塊中。 因此，要開始該過程，我們輸入腳本行以顯示我們正在使用 JSON-LD 格式： 

 <script type="application/ld+json">

JSON-LD 代碼也應該包含在大括號（大括號）內，否則它不會應用於頁面或被搜索引擎解析。 這在 Javascript 中稱為對象結構。 因此，代碼的輪廓將如下所示： 

 <script type="application/ld+json">
代碼在這裡
</腳本>

現在，您需要將詞彙表定義的上下文用於鏈接到 Schema.org 的數據。

代碼的每一行也應該使用逗號。 

 "@context": "http://schema.org",

對於其他類型的 schema.org 格式，您需要定義要標記的內容類型。 這相當於 Microdata 的圖像類型屬性和 RDFa 的屬性類型。

我們將使用上面提到的簡單網站作為示例： 

 "@type": "商店",

現在我們定義商店的名稱及其描述。 如果您使用 Microdata 或 RDFa 來定義這些元素，它們應該顯示在網站主頁本身上。 但是在 JSON-LD 的情況下，您可以定義元素而不必出現在頁面上。 

 “名稱”：“哈希主題”，
"description": "最好的 WordPress 主題賣家！",

現在是定義地址的時候了。 地址將具有額外但更精確的屬性，例如街道地址和位置。 所以，我們要把它們放在一個大括號裡。 

 “地址”： {
"@type": "郵政地址",
"addressLocality": "尼泊爾拉利特布爾",
"streetAddress": "多比哈特",
},

現在，我們將放置商店的營業時間。 我們將在數組中保留開放時間，並以兩個字母組合指定日期。 此外，時間應該是 24 小時制。 

 “營業時間”： [
“週一至週五 10:00-18:00”
],

最後，我們將添加一個電子郵件地址和主題 URL。 兩者都非常簡單。 

 “電子郵件”：“[email protected]”
“商店”：“https://hashthemes.com/wordpress-theme/”
最後，我們的標記將如下所示：
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "商店",
“名稱”：“哈希主題”，
"description": "最好的 WordPress 主題賣家！",
“地址”： {
"@type": "郵政地址",
"addressLocality": "尼泊爾拉利特布爾",
"streetAddress": "多比哈特",
},
“營業時間”： [
“週一至週五 10:00-18:00”
],
“電子郵件”：“[email protected]”
“商店”：“https://hashthemes.com/wordpress-theme/”
}
</腳本>

您可以使用 Google 的結構化數據測試工具來檢查語法是否有錯誤。

如何在您的 WordPress 網站上實施模式標記？

Schema Markup 的實現可以通過不同的方式完成。 您可以關注他們以使您的網站 SEO 友好並提高您的內容在搜索引擎中的排名。 這裡是其中的一些：

選擇與架構標記內置集成的 WordPress 主題：

如您所知，WordPress 是最受歡迎的平台，它包含大量模板，可以立即創建有吸引力的網站。 但是，只有少數幾個主題與 Schema Mark Up 代碼集成。 因此，如果您選擇 WordPress 主題來啟動您的網站或對現有網站進行改造，請務必檢查該主題是否至少包含常見的架構功能。 通用架構包括頁眉、頁腳和導航選項，以允許搜索引擎了解您網站的結構。

使用 WordPress 插件標記其他模式數據

如上所述，您可能很難找到與 Schema MarkUp 代碼完全集成的 WordPress 主題。 因此，作為替代方案，您可以選擇可用於在您的網站上添加架構功能的 WordPress 插件。 Yoast SEO 和 Schema Pro 是少數幾個有助於在您的網站上實施 Schema MarkUp 的插件。

實現模式標記時要記住的事情

既然您知道如何在 WordPress 網站上實現架構標記，那麼在實現架構標記時，您可能需要記住以下幾點：

集成模式標記可能無法保證良好的排名

僅模式標記並不能保證您的 Web 內容的良好排名。 還有許多其他因素，如內容權威、內容質量、關鍵字分析、相關性等會影響排名。 因此，請記住，模式標記只是可以幫助您提高內容排名的因素之一。

模式標記需要時間才能生效

如果您想知道 Schema Markup 會立即生效，那您就錯了。 在搜索結果中看到豐富的摘要需要幾個月的時間。

檢查 WordPress 主題給出的模式標記並使用插件相應地增強功能

大多數 WordPress 主題只採用常見的模式，如頁眉和頁腳、導航。 雖然可能有一些模板具有其他與 Schema 相關的實現功能。 你可以去谷歌結構化數據測試工具來分析你網站的架構實現，並相應地選擇插件。