[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

Google 結構化資料標記:搜尋結果連結網址顯示階層式網站名稱

Google 網站管理員部落格在 2015 年 4 月 16 日說明,為了讓搜尋結果在行動裝置上,也能夠有良好的體驗,會將行動搜尋結果中的 URL 網址格式,更改為以網站名稱替代的方式顯示 ( 與麵包屑式格式雷同 )。

網頁裡部署「搜尋結果中顯示」的「網站名稱型式的階層式連結路徑」結構化資料標記,支援使用 schema.org 提供的 JSON-LD、Microdata、RDFa 這三種標記類型。

目前網站部署 Google階層式連結網站名稱」的結構化資料標記,僅適用於行動裝置搜尋使用,且現在只在美國語系搜尋結果中顯示。

Google 結構化資料標記:搜尋結果連結網址顯示階層式網站名稱_001



前置作業

於 Google Search Console 已提交「網站地圖 Sitemap.xml」。

Mobile Friendly:建立適合行動裝置瀏覽的網站「行動裝置相容性測試」。



設置說明 ( 指南 ):
為了讓 Google 將標記的結構化資料視為網站名稱,請務必執行以下操作:

使用 schema.org 提供的詞彙表及 JSON-LD、Microdata、RDFa 這三種標記類型。

設定網站「rel="canonical"」首選版本的連結元素。

不要使用機器人排除協議 ( Robots 協議:也稱為爬蟲協議、機器人協議 ... 等 ) 阻止帶「標記」的頁面。

網站名稱是唯一識別:不被其他網站使用,且不是網站的描述詞。

提供的網站名稱標記,必須與所屬網域合理相似。



標記須在 WebSite 項目下,並使用包含以下相關屬性:
url = 官方網站的網址 ( 必需 )「URL

name = 網站的首選名稱 ( 必需 )「Text

alternateName = 希望 Google 考慮的替代名稱 ( 可選 )「Text




設置流程

  1. 階層式網站名稱 JSON-LD 標記
  2. 階層式網站名稱 Microdata 標記
  3. Blogger 階層式網站名稱標記
  4. 標記調試分析

設定方式

「搜尋結果網站名稱」的結構化資料標記,可使用 JSON-LD、Microdata、RDFa 這三種標記類型。Google 推薦使用 JSON-LD 標記。

行動版網站中,只要有被搜尋引擎收錄的網頁,皆可放置標記。尤其是文章頁面部署「Breadcrumb 階層導覽麵包屑」的網頁。



Step 1

階層式網站名稱 JSON-LD 標記

可將以下陣列資料,放置在網頁的「</head>」之前「</title>」之下,即可完成設定。(* 相關 url、name、alternateName 名稱更改為自己的資料。)

<script type='application/ld+json'>
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "技研可樂",
  "alternateName": "TECHCOKE",
  "url": "https://www.techcoke.com"
}
</script>



Step 2

階層式網站名稱 Microdata 標記

修改網頁「</head><title>」資料,並加入相關結構化資料標記。(* 相關名稱更改為自己的資料。)

<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>技研可樂</title>
<link rel="canonical" href="https://www.techcoke.com" itemprop="url"/>



網站的其他語系可使用:

<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>技研可樂</title>
<link rel="canonical" href="https://www.techcoke.com/en/" itemprop="url"/>
</head>

<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>技研可樂</title>
<link rel="canonical" href="https://www.techcoke.com/jp/" itemprop="url"/>
</head>



Step 3

Blogger 階層式網站名稱標記

Blogger 範本中的「<b:include data='blog' name='all-head-content'/>」,預設會自動提取出「rel='canonical'」檔案,不過並不會自動添加「itemprop='url'」。

須先搜尋並註釋掉「<b:include data='blog' name='all-head-content'/>」。再添入以下原始「<b:include data='blog' name='all-head-content'/>」裡面提取的內容物。

<!-- <b:include data='blog' name='all-head-content'/> -->
註釋掉上面這一行,並添加下方代碼至 HTML 範本中。

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link rel='canonical' expr:href='data:blog.url' itemprop='url'/>
<link rel='alternate' type='application/atom+xml' expr:title='data:blog.title + &quot; - Atom&quot;' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' />
<link rel='alternate' type='application/rss+xml' expr:title='data:blog.title + &quot; - RSS&quot;' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' />
<link rel='openid.server' href='https://www.blogger.com/openid-server.g' />
<link rel='openid.delegate' expr:href='data:blog.url' />


Step3-1 Blogger 建議使用 JSON-LD 標記:

如果範本中找不到上列「<b:include data='blog' name='all-head-content'/>」程式碼,或是「rel='canonical'」,可以直接添加下面的代碼到 HTML 範本中使用。

<link rel='canonical' expr:href='data:blog.url' itemprop='url'/>


雖然「階層式網站名稱」標記僅支援行動版網頁,但難保以後電腦版也會支援。以下行動版 if 判斷式,各別針對電腦版與行動版網頁增加 JSON-LD 標記。


接著將以下陣列資料,放置在網頁的「</head>」之前「</title>」之下,即可完成設定。(* 相關 url、name、alternateName 名稱更改為自己的資料。)

<b:if cond='data:blog.isMobile'>
<script type='application/ld+json'>
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "技研可樂",
  "alternateName": "TECHCOKE",
  "url": "https://www.techcoke.com/?m=1"
}
</script>
  <b:else/>
<script type='application/ld+json'>
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "name": "技研可樂",
  "alternateName": "TECHCOKE",
  "url": "https://www.techcoke.com"
}
</script>
</b:if>



Step3-2 Blogger 使用 Microdata 標記的部署方式如下:

如果範本中找不到上列「<b:include data='blog' name='all-head-content'/>」程式碼,或是「rel='canonical'」,可以直接添加下面的代碼。

修改範本「</head> 及 <title>」資料,並加入「rel='canonical'」結構化資料標記,到 HTML 範本中使用。

<head itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<title itemprop='name'><data:blog.pageTitle/></title>
<link rel='canonical' expr:href='data:blog.url' itemprop='url'/>



以上 Blogger 自訂網址套用 CloudFlare Flexible SSL 的使用者不適用。因為 Blogger 系統不會自動幫「rel='canonical'」添入「data:blog.url」HTTPS 型式的網址。

目前僅能等待 Blogger 系統,能早一點支援自訂網址用戶的「data:blog.url」,可以自動轉換 HTTPS 型式的網址。除非自行自發性地,為每一篇文章使用「指向性 if 判斷式」幫「rel='canonical'」加入 HTTPS 型式網址。



Step 4

標記調試分析

使用「結構化資料測試工具」,分析檢測自己行動版網站網址的結構化資料標記。

Google 結構化資料標記:搜尋結果連結網址顯示階層式網站名稱_301



小結

本文僅做筆記整理,實際操作運用依「官方」公佈資料為準。

「階層式網站名稱」標記不像「連結搜尋框」標記,得將標記放在「網站的首頁」。因為搜尋引擎撈到的網頁頁面,都能運用到這個標記。

使用行動裝置上的 Chrome 瀏覽器切換語系為英文,試著用 Google 搜尋 Twitter 的相關資料,可以找到幾筆顯示階層式連結名稱的例子。目前觀察,搜尋中出現應用標記的網站相當少。

Google 結構化資料標記:搜尋結果連結網址顯示階層式網站名稱_401

而實際搜尋 Google 網站管理員部落格提供的例子「history of google」,連結網址目前也是以「www.google.com」的型式顯示。



相關文章

Google 結構化資料測試工具:使用方式與基本準則



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *