\

美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

第一次做結構化資料Schema Markup就上手!照範例抄即可!

  • 時間:2019-02-25
  • 發布:達內教育台灣
  • 來源:網路行銷課程

這篇中有提到:善用 Schema 語意標記,可以幫助 Google 搜尋引擎爬蟲更快理解網頁的內容,以提升網頁的 SEO。這一篇,我們就來列舉一些 Schema 語意標記的範例,幫助所有 SEO 優化師們、或是需要做 SEO 的前端工程師們更快上手!

   ▶ 參考資料:如何善用Schema語意標記,提升網頁的SEO? (http://bit.ly/2NhPjHs)

以下的 Schema 語意標記,雖是取自某些特定網站的範例,但是同樣的方法,也適用於各種網站:

適用於介紹公司/組織的 Schema Markup

這類的 Schema Markup 除了可以幫助 Google 爬蟲可以透過你的網站而抓取貴公司/組織的資訊外,還可以增加在 Google 搜尋結果頁面顯示貴公司的「Google知識圖譜 (Knowledge Graph)」的機率喔!

什麼是知識圖譜?

如下圖的例子所示,當我們在 Google 輸入關鍵字「Adobe」時, Google 右側會出現簡介,包含「Adobe」的標誌、URL、客服專線、總部位置與社群網站的連結。
這是因為 Adobe 的官網有做公司/組織類的結構化資料標記,有助於 Google 搜尋引擎抓取,而在使用者在搜尋相關關鍵字時,資訊會在搜尋結果頁右方顯示其資訊卡。

當我們在搜尋引擎輸入關鍵字後,有時知識圖譜會出現在搜尋結果頁的右方,非常醒目。

以下為此範例的業主「Adobe」在網頁的 HTML 原始碼中,所置入的原始碼:

<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 Organization(公司/組織)類來呈現資料↓↓↓-->
"@context": "https://schema.org",
"@type": "Organization",
<!--↓↓↓標記公司網址↓↓↓-->
"url": "https://www.adobe.com",
<!--↓↓↓標記公司名稱↓↓↓-->
"name": "Adobe",
<!--↓↓↓標記公司登記名稱↓↓↓-->
"legalName": "Adobe Systems Incorporated",
<!--↓↓↓標記公司其他的名稱↓↓↓-->
"alternateName": "Adobe.com",
<!--↓↓↓標記公司的LOGO↓↓↓-->
"logo": "https://www.adobe.com/favicon.ico",
<!--↓↓↓標記公司的其他官方網站或社群,如FB、推特、IG、linkdin等等↓↓↓-->
"sameAs": [
"https://www.facebook.com/Adobe/",
"https://twitter.com/Adobe/",
"https://www.linkedin.com/company/adobe/",
"https://www.instagram.com/adobe/"
],
<!--↓↓↓標記公司的聯絡資訊,如電話、連絡類型等等↓↓↓-->
"contactPoint": [
{
"@type": "ContactPoint",
<!--↓↓↓標記公司的聯絡電話↓↓↓-->
"telephone": "+1-800-833-6687",
<!--↓↓↓標記公司的聯絡類型為「客戶服務」↓↓↓-->
"contactType": "customer service",
<!--↓↓↓標記公司的聯絡選項為「免付費」↓↓↓-->
"contactOption": "TollFree",
<!--↓↓↓標記公司的聯絡地區為「美國」↓↓↓-->
"areaServed": "US",
<!--↓↓↓標記公司的服務語言為「美式英文」↓↓↓-->
"availableLanguage": "US"
}
]
}
</script>

網站連結專用之 Schema Markup

如果你的網站中有「站內搜尋」的功能,你可以針對它做標記,使搜尋框出現在搜尋結果頁中,如下圖所示:

以下為此範例的業主「Apple」在網頁的 HTML 原始碼中,所置入的原始碼:

<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 WebSite (網站)類來呈現資料↓↓↓-->
"@context": "https://schema.org",
"@type": "WebSite",
<!--↓↓↓藍色字體可替換為貴公司網址↓↓↓-->
"url": "https://www.apple.com",
<!--↓↓↓藍色字體可替換為貴公司名稱↓↓↓-->
"name": "Apple",
"potentialAction": {
"@type": "SearchAction", <!--↓↓↓藍色字體部分為公司站內搜尋頁面,而{search_term_string}的意思為搜尋字串↓↓↓-->
"target": "https://www.apple.com/us/search?q={search_term_string}",
"query-input": "required name=search_term_string" } }
</script>

若貴公司的網站沒有站內搜尋,則可以以 Google 搜尋引擎的方式取代之如下:

<script type="application/ld+json">
{
<!--↓↓↓宣告要使用 schema.org 的 WebSite (網站)類來呈現資料↓↓↓-->
"@context": "https://schema.org",
"@type": "WebSite",
<!--↓↓↓藍色字體可替換為貴公司網址↓↓↓-->
"url": "貴公司的網址",
<!--↓↓↓藍色字體可替換為貴公司名稱↓↓↓-->
"name": "貴公司名稱",
"potentialAction": {
"@type": "SearchAction", <!--↓↓↓藍色字體部分為公司站內搜尋頁面,而{search_term_string}的意思為搜尋字串↓↓↓-->
"target": "https://www.google.com/search?q={search_term_string}+site:貴公司的網址",
"query-input": "required name=search_term_string" } }
</script>
上一篇:網路行銷人員也該上的HTML5教學2-認識HTML表格標籤
下一篇:網路行銷人員也該上的HTML5教學1-認識HTML基礎標籤與免費網頁編輯器
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省