自訂您的網站在搜尋結果中呈現的樣子

Astral WebBy Astral Web 3 years ago8 Comments
首頁  /  網站設計與開發  /  自訂您的網站在搜尋結果中呈現的樣子

自定網站搜尋結果

Google 提供了幾個方法,讓我們可以自訂網站在搜尋結果中出現的樣子。

  1. 在搜尋結果中顯示麵包屑導覽。
  2. 在搜尋結果中顯示Sitelinks搜尋框。
  3. 在搜尋結果中顯示網站名稱。

接下來我們將一一為您做介紹。

breadcrumbs 麵包屑

麵包屑是一組連結、可以幫助使用者了解目前所在頁面的位置及網站的結構。

一個網頁可以同時擁有二組以上的麵包屑。例如:

Books › Authors › Stephen King

Books › Fiction › Horror

當我們幫麵包屑加上結構化標記後,搜尋結果就會如下圖所示:

自定網站搜尋結果

底下的範例是一組服飾網站的麵包屑導覽

<a href="http://www.example.com/dresses">Dresses</a> ›
<a href="http://www.example.com/dresses/real">Real Dresses</a> ›
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>

這組麵包屑導覽在網頁上的呈現如下:

Dresses › Real Dresses › Real Green Dresses

 

幫麵包屑加上結構化標籤

Microdata

<div id="a" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>
<div id="b" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child" itemref="c">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>
<div id="c" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

 

Microdata 多重麵包屑的用法

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/books/authors" itemprop="url">
      <span itemprop="title">Authors</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
        <span itemprop="title">Stephen King</span>
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fiction" itemprop="url">
      <span itemprop="title">Fiction</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/fiction/horror" itemprop="url">
        <span itemprop="title">Horror</span>
      </a>
    </div>
  </div>
</div>

 

RDFa

<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses" rel="v:url" property="v:title">
      Dresses
    </a> ›
    <span rel="v:child" typeof="v:Breadcrumb">
      <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
        Real Dresses
      </a> ›
    <span rel="v:child" typeof="v:Breadcrumb">
      <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
        Real Green Dresses
      </a> ›
    </span>
  </span>
</div>

 

RDFa多重麵包屑的用法

<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      Books
    </a> ›
    <span rel="v:child" typeof="v:Breadcrumb">
      <a href="http://www.example.com/books/authors" rel="v:url" property="v:title">
        Authors
      </a> ›
      <span rel="v:child" typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">
          Stephen King
        </a> ›
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#">
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      Books
    </a> ›
    <span rel="v:child" typeof="v:Breadcrumb">
      <a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">
        Fiction
      </a> ›
      <span rel="v:child" typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">
          Horror
        </a> ›
      </span>
    </span>
  </span>
</div>

 

增加一個Sitelinks搜尋框

自定網站搜尋結果

假設使用者想要在Youtube上搜尋guilty dog這個關鍵字,一般的作法是先搜尋Youtube,點進Youtube網站後再搜尋guilty dog。

 

而Google的Sitelinks 搜尋框簡化了這些步驟。當您搜尋完Youtube之後,您不需要點擊進Youtube的網站、只要直接利用搜尋結果中的Sitelinks search box便可以直接查詢Youtube的網頁。

 

如何設定搜尋框

 

1.在網站上安裝一個搜尋引擎(您可以使用google的自訂搜尋)

2. 在網站首頁放上底下的程式碼

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "https://www.example-petstore.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "https://query.example-petstore.com/search?q={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
</script>

 

  1. “url”—與首頁的 canonical URL 相同。
  2. potentialAction:target—搜尋結果的頁面.
    • 必須包含一個由大刮號包起來的變量、這變量代表之後使用者查詢的關鍵字,如: {search_term_string}。代表變量的字串必須跟query-input的required name值相同。
    • 必須指向與網站相同的網域。
    • 以上面代碼為例:當使用者查詢power時,實際的查詢結果頁面是:https://query.example-petstore.com/search?q=power
  3. query-input—required name的值必須與 potentialAction:target 大刮號中的變量相同。

 

為什麼我的搜尋框不會顯示?

搜尋框的作用是方便使用者更快速的搜尋您的網站內容。Google 搜尋引擎會判斷是否需要出現搜尋框。

 

注意事項

  1. 首頁必須設定一個canonical URL。
  2. 確定您的伺服器支援UTF-8編碼。
  3. 相關的標記只需要放在首頁即可。
  4. Google建議使用JSON-LD來標記搜尋框。

 

使用microdata標記的方法:

<div itemscope itemtype="http://schema.org/WebSite">
  <meta itemprop="url" content="https://www.example.com/"/>
  <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

 

如何幫MAGENTO網站設定sitelinks搜尋框

因為MAGENTO網站預設的搜尋結果頁面網址是:http://www.yoursite.com/catalogsearch/result/?q=keywords,因此我們要調整potentialAction:target的值。

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "https://www.example-petstore.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "http://www.yoursite.com/catalogsearch/result/?q={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
</script>

 

如何禁用您網站的sitelinks搜尋框

如果您不希望在搜尋結果中出現sitelinks搜尋框、只要在<head>加上底下的中繼標籤即可。

 

<meta name="google" content="nositelinkssearchbox" />

 

在搜尋結果中顯示網站的名稱:

使用結構化標籤可以向google提交網站在搜尋結果中所顯示的名稱(如下圖)。您也可以提供二個名稱讓搜尋引擎選擇

決定網站名稱:

決定網站名稱時需要注意以下幾點:

  1. 網站名稱要與城名相似。
  2. “Google”比”Google, Inc.”好,”Astralweb”比”Astralwebinc”好。
  3. 網站名稱最好是獨一無二的。
  4. 不要使用容易造成誤解的描述性文字。

 

添加結構化標記

  1. 在網站首頁添加 WebSite 標記
  2. 添加WebSite標記的相關屬性:
    • url = 官方網站的網址 (必要屬性)
    • name = 網站名稱 (必要屬性)
    • alternateName = 網站備用名稱 (非必要屬性)
  3. 不要使用Robots.txt阻擋搜尋引擎檢索您的網站。

 

您可以使用JSON-LD或是microdata來指定網站名稱。以下是示範的程式碼

JSON-LD

 

 <script type="application/ld+json">
    {  "@context" : "http://schema.org",
       "@type" : "WebSite",
       "name" : "Your WebSite Name",
       "alternateName" : "An alternative name for your WebSite",
       "url" : "http://www.your-site.com"
    }
    </script>

 

MICRODATA

 

 <head itemscope itemtype="http://schema.org/WebSite">
    <title itemprop='name'>Your WebSite Name</title>
    <link rel="canonical" href="https://example.com/" itemprop="url">

 

測試工具

您可以使用Google Structured Data Testing Tool.來測試您的網頁是否設置正確。

當一切都設定好之後,我們就耐心的等著他生效吧。不過Google 也提到他們有可能不採用我們自訂的網站名稱(參考Google說明)

歐斯瑞有限公司編寫製作

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

8 Comments

  • lu7766 says:

    我想請問,我要在我的網站增加Sitelinks,實際上我應該怎麼做呢?
    是不是只需要把那段script放到我的homepage,再把其中的url跟target改成我自己的url就可以了嗎?HTML都不用變更嗎?
    假設我的網址是:http://123.com.tw search的頁面是http://123.com.tw/search.aspx?descript=搜尋內容
    所以我只要在hpme page裡面塞入下面內容這樣就行了嗎?

    {

    “url”: “http://123.com.tw”,

    “target”: “http://123.com.tw/search.aspx?descript={search_term_string}”,

    }
    }

    另外我還想請問JSON-LD、MICRODATA這兩個又分別是什麼呢??不好意思第一次接觸這區塊,問題有點多

    • Astralweb Astralweb says:

      是的、照您說的方式修改就可以了。
      microdata 是專為搜尋引擎設計的標記、主要用義是讓搜尋引擎更加了解網頁文字內容的意義。
      請參考我們這篇文章:善用SCHEMA 標記,讓搜尋引擎更容易了解你的內容!
      Getting started with schema.org using Microdata

      • lu7766 says:

        謝謝~這篇文章對我十分有幫助,另外請問如果搜尋引擎找到我的Sitelink出現了searchbox,那搜索結果,我在網路上有看到兩種,一種是在google 中列出list,一種是進到網站中的search頁面。這兩種結果的不同,是因為第一種是採用google搜尋引擎,而第二種是用自己站內的搜尋引擎的關係嗎?

        另外搜索中的提示字,是google用自己的資料庫去列出資料,還是他會實際比照我網站中的提示字列出來?

        • Astralweb Astralweb says:

          假設您target的設定是:http://123.com.tw/search.aspx?descript={search_term_string},那麼之後你的搜尋結果頁面將會是:http://123.com.tw/search.aspx?descript=搜尋關鍵字,所列出來的結果即是您站內搜尋的結果,與google 的site search不同。

  • allen says:

    請問如果我的搜尋結果網址所帶的參數除了關鍵字以外,另外還有別的參數,那query-input是否需要更改?以及應該如何更改? 還有search_term_string,是google內建的名稱嗎? 還是只要與query-input的required name一致就可以了? 先謝謝您的回覆

    • Astral Web Astral Web says:

      如果參數是固定的、試用使用調整target的值就好,search_term_string,不是google內建的名稱,只要與query-input的required name一致就可以了。

  • vv66 says:

    謝謝分享,這篇非常有幫助。但還想了解是否有教如何讓網站搜尋結果中出現其他資訊,例如在GOOGLE搜尋貴司網站時,在網站底下會出現「公司資訊、Magento」呢?

    • Astral Web Astral Web says:

      您好,您提的這個部份是sitelinks,這個部份是由Google自動產生的、一般是網站內常用的連結、導覽的連結等。我們只能使用webmaster移除sitelinks, 無法自訂sitelinks哦。

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。