如何使用架構.org你網站上的標記以及為什麼你應該

搜尋引擎不能自己識別網頁上的重要資訊——它們需要網站所有者和開發人員的幫助。模式標記是實現這一點的一種方法。...

搜索引擎功能驚人。他們可以解釋我們用來找出我們要找的東西的通常不清楚的語言,確定回答我們問題的最佳資源,並在幾秒鐘內展示給我們。

schema-html-markup-featured

谷歌甚至非常擅長在搜索結果頁面上回答問題,不再需要點擊任何東西。它甚至可以個性化搜索結果。這有助於人們更快地找到他們想要的信息。

但搜索引擎無法獨立完成這項工作--它們需要網站所有者和開發者的幫助。模式標記是您在自己的站點上提供幫助的一種方法。

什麼是架構標記(schema markup)?

模式標記是突出顯示特定結構化數據片段的一種方法。

什麼是結構化數據?它是經過組織和標記的信息,以便機器更好地理解。簡而言之,模式標記是幫助搜索引擎在網頁上查找特定類型信息的信息。看一個例子是最簡單的。

谷歌有自己的交互式模式標記示例,詳細說明了蘋果派的配方:

google structured data tool

上面,您可以看到JavaScript,它定義了準備時間、總時間、配方產量以及配方的各種營養成分。

在這一點上應該注意,有兩種主要的方法來標記結構化數據:使用JSON或內聯HTML標記。Google推薦使用JSON方法,但我們稍後會討論這兩種方法。

以下是谷歌如何提取具體營養信息:

schema markup nutrition

架構.org有數千種不同類型的標記,您可以使用它們更好地向搜索引擎顯示頁面上的信息。例如,TechArticle類型包括以下屬性:

  • 熟練程度
  • 字數
  • 觀眾
  • 造物主
  • 創建日期
  • 修改日期
  • 發佈日期
  • 出版原則
  • 典型的卡拉格蘭奇

有圖書館、住宿企業、公寓、視覺藝術活動、廣播頻道、交付方式、遊戲服務器狀態等的完整模式。

這樣做的目的是確保搜索引擎知道你頁面上的每一條信息實際上代表了什麼,這樣它就可以將這些信息顯示給正在尋找它們的人。

模式標記的好處

好 啊。模式標記告訴搜索引擎你的頁面上有什麼——有什麼大不了的?

谷歌這樣說:

"When information is highly structured and predictable, search engines can more easily organize and display it in creative ways."

例如,您可能會看到搜索結果中直接顯示的即將到來的**巡演的巡演日期:

schema markup results

或者在搜索電影時獲取有關該電影的特定信息:

schema markup sicario

Google在自己尋找這些信息方面一直在進步,但是正確地使用模式標記會使這個過程變得更容易,並且使你的頁面上的信息更有可能被顯示出來。

當搜索引擎確切地知道你的頁面上有什麼內容時,他們就可以把它顯示給在搜索結果中尋找它的人。這對每個人都有好處。

結構化數據入門

既然你已經看到了使用架構.org加價,是時候開始跳水了。我們將從最簡單的工具開始:谷歌的數據熒光筆。

你需要你的網站連接到谷歌的搜索控制檯(以前稱為網站管理員工具)。如果您需要幫助進行設置,請查看Yoast的有用演練。

完成後,請登錄搜索控制檯並單擊“搜索外觀”>“數據高亮顯示”。點擊屏幕右側的開始突出顯示按鈕。

google data highlighter

接下來,您需要輸入要標記的頁面的URL,並選擇要執行的標記類型。在這種情況下,我們將使用Articles標記類型。

schema markup article type

因為我在一個發佈了很多文章的站點上突出顯示了一篇文章,所以我會保持對這個頁面和其他類似頁面的標記處於選中狀態。

現在您將看到一個拆分屏幕:頁面在左側,可用標記字段在右側。

從這裡開始很簡單。開始突出顯示!每當突出顯示文本(或單擊圖像)時,都會出現一個小菜單,您可以在其中選擇突出顯示的信息類型。

在這裡,我突出顯示了頁面的標題。我所要做的就是點擊菜單中的“標題”。

data highlighter title

現在標題填充在右窗格中。

data highlighter title populated

我將繼續,突出顯示作者、發佈日期、主圖像和類別(我突出顯示了文章頂部的標記,這三個標記都作為類別導入)。

data highlighter pane

我們完了!就這些。

當您點擊“完成”時,Data Highlighter將幫助您將此標記應用於站點上的其他類似頁面。

添加更多細節

Data Highlighter只允許您觸及結構化數據標記的表面。正如您在上面看到的,我只能為那篇文章添加一些屬性。架構.org的項目類型包含更多可以設置的屬性。

如果要向模式標記添加更多細節,我們該怎麼辦?

在這一點上你必須深入研究代碼。如前所述,有兩種主要的方法來表示結構化數據:使用JSON和內聯HTML標記。因為HTML標記更直觀一些,所以我們將首先討論它們。

內聯架構.orghtml標記

作為一個例子,我們將標記一個簡單的句子:“我住在丹佛。”在HTML中,它將被簡單地表示,如下所示:

<p>I live in Denver.</p>

要開始標記,我們需要指定這個特定的句子是關於一個人的(由person項類型顯示)。我們是這樣做的:

<div itemscope itemtype="http://schema.org/Person"> <p>I live in Denver.</p></div>

現在搜索引擎就會知道這個標籤中包含的所有內容都與一個人有關。

接下來,我們將添加一個標記屬性:

homeLocation

. 架構.org將homeLocation定義為“個人住所的聯繫地點”

我們需要將這個特定屬性添加到HTML中。我們是這樣做的:

<div itemscope itemtype="http://schema.org/Person"> <p>I live in <span itemprop="homeLocation">Denver</span>.</p></div>

現在“丹佛”被確定為

homeLocation

谷歌知道,這一段所指的人就住在那裡。

如果我們把句子改成“我在丹佛生活和工作”,我們也可以證明:

<div itemscope itemtype="http://schema.org/Person"> <p>I live and work in <span itemprop="homeLocation workLocation">Denver</span>.</p></div>

丹佛現在被確認為兩者

homeLocation

workLocation

. (感謝勞埃德銀行(Lloyd Bank)和斯塔克交易所(Stack Exchange)的unor概述了這個例子。)

這是一個相當簡單的模式標記的例子,但是您可以理解。通過使用

<div>

<span>

標籤,您可以向頁面上的任何內容添加屬性和屬性。

架構.org使用json標記

Google建議對模式標記使用JSON-LD(鏈接數據的JavaScript對象表示法)。這種方法最大的優點是它可以讓你的HTML更乾淨。如果你回去編輯一個頁面,看到幾十頁帶有標記的代碼,你不會高興的。

JSON標記仍然需要很大的空間,但是它與HTML分離,使得維護起來更容易。

假設您有一家名為Harker's的書店,並且在您的聯繫人頁面中包含以下信息:

Phone number: 555-8710Address: 749 Stoker St., Boulder, ColoradoHours: 10–9 Monday through Friday, 11–8 Saturday, 12–5 Sunday

下面是如何用JSON-LD表示的:

<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "BookStore", "telephone": "555-8710", "address": "749 Stoker St., Boulder, Colorado", "openingHours": [ "Mo-Fr 10:00-21:00", "Sa 11:00-20:00", "Su 12:00-17:00" ],}</script>

這會出現在頁面的標題中。如您所見,這將佔用大量的空間,因為這些內容幾乎肯定也會以HTML格式顯示在您的頁面上。所以你想加分的東西都會寫兩遍。

儘管存在這種重複,但是JSON方法通常更可取,因為它將模式標記和HTML分開。許多HTML最佳實踐似乎有點奇怪,直到你意識到它們使網站更容易維護。這是一樣的。

向站點添加架構標記

現在,您已經瞭解了幾種向站點添加結構化數據表示法的不同方法,可以開始了!最好從數據高亮顯示開始,然後繼續。這個架構.org文檔是最終的資源,但瀏覽起來有點困難。

不管你是想學習基礎知識還是開始標記眼前的一切,你現在都有了開始所需的資源!

你用過嗎架構.org你自己網站上的標記?你有什麼提示網站所有者或開發人員尋找開始?在下面的評論中分享你的想法!

圖片來源:iinspiration viaShutterstock.com網站

  • 發表於 2021-03-14 06:48
  • 閱讀 ( 42 )
  • 分類:程式設計

你可能感興趣的文章

為什麼我的wi-fi這麼慢?下面是如何修復它

...路由器。如果這不是你目前可以投資的東西,你可以看看如何提高你的Wi-Fi訊號,而不是。 ...

  • 發佈於 2021-03-10 20:10
  • 閲讀 ( 58 )

15個最好的免費joomla擴充套件,以改善您的網站

...站出現在搜尋引擎的搜尋結果中,你需要了解搜尋引擎是如何工作的,以及如何最佳化你的網站以獲得搜尋引擎的可見性和權威性。這就是所謂的搜尋引擎最佳化(SEO)。 ...

  • 發佈於 2021-03-13 02:11
  • 閲讀 ( 71 )

輕量級標記語言:這就是為什麼應該使用asciidoc而不是常規標記語言

...和顯示你的電子郵件是建立,至少部分,與HTML標記。HTML使用標記作為標記原始文字內容的機制。例如,考慮以下HTML片段: ...

  • 發佈於 2021-03-13 03:23
  • 閲讀 ( 57 )

如何正確設定機器人.txt為您的網站

... 我們來看看機器人.txt檔案是什麼,它做什麼,以及如何正確設定它為您的網站。 ...

  • 發佈於 2021-03-13 06:21
  • 閲讀 ( 53 )

獲得更多instagram真正粉絲的8個竅門

... 關於在Instagram上釋出什麼、何時釋出以及如何釋出,有很多研究。試試看什麼對你有用。請記住,有些研究實際上是矛盾的,所以這實際上是一個測試每一個問題。 ...

  • 發佈於 2021-03-14 02:56
  • 閲讀 ( 42 )

9個在構建網頁時不應該犯的錯誤

...(最好不是內聯樣式)來獲得相同的效果。如果您不確定如何替換一個不推薦使用的標記,或者某個特定的標記仍在使用中,請檢視官方的HTML文件,或者執行一個快速搜尋。 ...

  • 發佈於 2021-03-14 14:13
  • 閲讀 ( 45 )

用wordpress建立你的部落格:終極指南

... 如何安裝wordpress ...

  • 發佈於 2021-03-21 12:15
  • 閲讀 ( 46 )

8個你應該使用的instagram有用功能

...們,後來看到他們貼的東西后才後悔。這就是為什麼學習如何刪除Instagram上的關注者是個好主意。 ...

  • 發佈於 2021-03-21 20:34
  • 閲讀 ( 44 )

什麼是hsts,它如何保護https免受駭客攻擊?

... 什麼是HSTS,它如何幫助您的網站保持安全? ...

  • 發佈於 2021-03-22 16:41
  • 閲讀 ( 49 )

如何在站點上設定https:簡單指南

... 大多數描述如何安裝SSL證書的指南都會告訴您必須有一個專用的IP。這意味著購買更昂貴的專用託管計劃。 ...

  • 發佈於 2021-03-23 17:25
  • 閲讀 ( 45 )