(OXXO) meta 標籤與資料結構化之SEO

SEO 最重要的第一項重點就是 meta 標籤,這也是要告訴搜尋引擎和社群網站,你的 blog 或是網站主旨是什麼,作者是誰,分享的縮圖是什麼...等這些我們認為理所當然的資訊,畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧,現在還無法分辨你我網站內容的重點,因此我們必須靠這些 meta 或結構化資料 itemprop,來告訴它們。

 

本篇主要在介紹,如何正確設定分享文章到 google plus 以及 facebook 的標題、縮圖與內文概要,因為有了這些正確的設定,分享到社群網站就不會跳出莫名其妙的縮圖,同時在 google 的搜尋,也會呈現作者的大頭照與姓名,這些都是會吸引更多使用者瀏覽的好方法。

以oxxostudio網站為例, header 所加入的 meta 標籤:

<metaname="author"content="作者名稱"><metaname="copyright"content="版權所有人名稱"><linkrel="author"href="google plus 個人頁網址/posts"><linkrel="publisher"href="google plus 個人頁網址"><metaname="description"content="網頁描述"><metaitemprop="name"content="網站名稱或標題"><metaitemprop="image"content="要顯示的縮圖網址"><metaitemprop="description"content="網頁描述"><metaproperty="og:title"content="網站名稱或標題"><metaproperty="og:url"content="網址"><metaproperty="og:image"content="要顯示的縮圖網址"><metaproperty="og:description"content="網頁描述">

其中以下這三行,是寫給搜尋引擎看的 ( 特別是 google ),當中最重要的,就是rel="author"這一句,有寫這一段,接下來我們就可以去去 google plus 進行互相認證的作業 ( 也就是要讓 google plus 確認這個網頁的作者是你 )

<linkrel="author"href="google plus 個人頁網址/posts"><linkrel="publisher"href="google plus 個人頁網址"><metaname="description"content="網頁描述">

而認證的過程,可以點選 google 結構化資料測試工具 連結,進行相關的認證作業,認證的過程其實也很簡單,就是進入 google plus 的個人頁面,點選「帳戶」,點選「編輯個人資料」,接著將「連結」裏頭的「作品刊載於」,新增目前的網站,接著 google plus 就會去查詢你的網站是否有放上rel="author",如果有,就完成囉!

而這三行是寫給 google plus 看的,分享到 google plus 上頭,就會正確顯示

<metaitemprop="name"content="網站名稱或標題"><metaitemprop="image"content="要顯示的縮圖網址"><metaitemprop="description"content="網頁描述">

而這四行是寫給 facebook 看的,分享到 facebook 上頭,就會正確顯示,如果發現都已經照著設定了,分享時仍有問題,可以點選 Facebook Debugger 進行查詢和重新設定,完成後再次分享應該就不會有問題囉!

<metaproperty="og:title"content="網站名稱或標題"><metaproperty="og:url"content="網址"><metaproperty="og:image"content="要顯示的縮圖網址"><metaproperty="og:description"content="網頁描述">

當然 meta 標籤絕對不止這一些,因為除了 facebook 和 google plus,還有一個世界前三大的社群平台 twitter,以下列出在這些平台上完整的 meta 標籤語法,如果有需要也可以都加進自己的網站喔!

<!-- Update your html tag to include the itemscope and itemtype attributes. --><htmlitemscopeitemtype="http://schema.org/Article"><!-- Place this data between the <head> tags of your website --><title>Page Title. Maximum length 60-70 characters</title><metaname="description"content="Page description. No longer than 155 characters."/><!-- Google Authorship and Publisher Markup --><linkrel="author"href=" https://plus.google.com/[Google+_Profile]/posts"/><linkrel="publisher"href=https://plus.google.com/[Google+_Page_Profile]"/><!-- Schema.org markup for Google+ --><metaitemprop="name"content="The Name or Title Here"><metaitemprop="description"content="This is the page description"><metaitemprop="image"content=" http://www.example.com/image.jpg"><!-- Twitter Card data --><metaname="twitter:card"content="summary_large_image"><metaname="twitter:site"content="@publisher_handle"><metaname="twitter:title"content="Page Title"><metaname="twitter:description"content="Page description less than 200 characters"><metaname="twitter:creator"content="@author_handle"><!-- Twitter summary card with large image must be at least 280x150px --><metaname="twitter:image:src"content=" http://www.example.com/image.html"><!-- Open Graph data --><metaproperty="og:title"content="Title Here"/><metaproperty="og:type"content="article"/><metaproperty="og:url"content=" http://www.example.com/"/><metaproperty="og:image"content=" http://example.com/image.jpg"/><metaproperty="og:description"content="Description Here"/><metaproperty="og:site_name"content="Site Name, i.e. Moz"/><metaproperty="article:published_time"content="2013-09-17T05:59:00+01:00"/><metaproperty="article:modified_time"content="2013-09-16T19:08:47+01:00"/><metaproperty="article:section"content="Article Section"/><metaproperty="article:tag"content="Article Tag"/><metaproperty="fb:admins"content="Facebook numberic ID"/>

更多的資訊也可以參考 這個網站

 

原文 http://www.oxxostudio.tw/articles/201406/social-meta.html