文章專區

SEO與搜尋行銷相關

 先前曾分享過網頁結構化資料是什麼?的原理與用意也介紹過網頁結構化資料常見的格式種類,相信大家對於網站結構化資料有了基本的認識,同時在本站中,也有較詳細針對 JSON-LD-結構化標籤、 Microdata-結構化標籤和網頁結構化資料-實際應用範例,有使用上的說明,但相信在初試網頁結構化時,會有許多人在實際應用上,不知道該如何對應使用標籤格式或 Schema.org 的分類選擇,因此本次將分享協助網頁結構化的快速產生工具。    在看完後本站網頁結構化資料解說後,如果還是不知該如何將網頁結構化資料導入到網頁中時,本站將為大家介紹能協助快速產生結構化標籤功能的小工具,網頁結構化算是協助搜尋引擎更精準判讀收錄網站的一種良性互動設定,因此 GOOGLE 也貼心的設計出了協助工程人員的快速標籤工具,結構化資料標記協助工具:https://www.google.com/webmasters/markup-helper/u/0/?hl=zh-TW 。  從結構化資料標記協助工具的畫面中,我們可以直接透過選擇類型來定義網站的標籤分類,再填入將要進行標記的網址,就可以開始進行結構化的定義標籤。  在標記完標籤資訊後,透過建立HTML,協助工具便會自行產生出相對應的程式編碼,在初始畫面中看到的 HTML原始碼,是根據 Microdata 標籤格式進行編譯的,Google 響應推廣 JSON-LD 標籤格式,所以也可以使用"微資料"當中的JSON-LD來轉換標籤格式。  產生完相對的結構化原始碼之後,將產生出來的原始碼,視網站類別屬於靜態還是動態類型,加入網頁編碼就能大功告成。 
   Google Search Console 是在接觸網站行銷 與 SEO(收尋引擎最佳化) 時,大多數人會使用的網站管理工具,相信對熟悉網站行銷的專業管理人員是絕不陌生的,因為 Search Console 主要是由 Google 所開發的一套免費管理工具,也是Google 主動對外釋出貼近管理人員的互動功能,透過相關的應用與追蹤,網站管理人員可以有效的瞭解與設定網站和搜尋引擎建立友善互動性,達到網站行銷與搜尋引擎最佳化的功能。     Search Console 是網頁型的管理工具,Search Console 網址:https://www.google.com/webmasters/tools/home?hl=zh-TW ;透過 Google 會員帳號便能申請加入網站的管理與應用,在初次使用時,可以由新增內容輸入將要進行管理的網站地址來進行加入,  在加入要管理後的網址後,管理員工具會要求您進行網站擁有權的驗證,來瞭解您是否正確的擁有網站的管理權限,驗證的方式是經由下載管理員工具所提供的驗證檔案來置入網站空間根目錄,並回到驗證畫面進行驗證確認就算成功安裝(驗證檔由 Search Console 提供,因此無須太擔心安全性),    在成功置入後,Search Console 便會導向至網站管理介面,管理工具會自行先對網站掃瞄並瞭解,並將目前狀態顯示告知在介面中。  確認完網站狀態的正確後,便能透過左方工具選項欄位對網站做更精細的檢測與調整,使網站能更貼近、符合搜尋引擎最佳化規則。  
  先前在介紹"結構化標籤的常見種類"時,我們提到了標籤種類分為:行內撰寫 與 外嵌引入兩種型式,大多數的標籤種類都是屬於行內撰寫,現行當中只有 JSON LD 為外嵌引入,是以 JavaScript 語法為基礎,可由原有的 JSON 格式解析外嵌型的標記方式,結構較為簡易好維護,可與 MicroData 共通 Schema.org 格式,逐漸有許多主流搜尋企業推從,是未來可能取代其他格式的趨勢標籤格式。      由 MicroData 的介紹中,我們能瞭解主流搜尋引擎需要詳細的資訊來貼近符合呈現使用者所搜尋的目標,只使用 HTML 5 原有語意標籤顯得較為薄弱,但相較於 Microdata 而言,新型態外嵌 JSON-LD 透過 < script type="application/ld+json" > 的包覆, 將資料與頁面結構抽離, 讓使用上更加的便利,只需要在頁面上的 head 內插入一段 script 資訊就能完成!   在應用JSON-LD時,先在 <script> 內填入 type="application/ld+json" ,由 @context  定義 JSON-LD 使用的各種類別,@type 宣告應用的屬性,如同 Microdata 般選擇schema.org中有提到的種類,例如: WebSite, Organization, Product等,後續再根據後續屬性,如:"name","url", 進行對應標記填入描述的格式即可。     < script type="application/ld+json" >   {       "@context": "http://schema.org",       "@type": "WebSite",       "name": "一化網頁設計",       "url": "https://www.webdesigns.com.tw/"   }   < /script >     對於需要使用 JSON-LD 的架構來標記時,必須要先釐清瞭解 json 的階層關係,再如同 Microdata 般使用上面提到的 schema.org 找到網站適合的種類後跟選擇屬性來進行使用。 
  前篇介紹"結構化標籤的常見種類"時,我們提到了 MicroData - 是應用在 HTML5 的常見技術,雖然 HTML5 新規格中提出了許多語意標籤,如:      aside:網頁的側欄、附加內容。      article:單篇文章內容。      section:自訂的區塊,如多篇摘要組成的空間。      mark:強調小區塊內容。    來提供搜尋引擎或是其他軟體工具,可以更清楚的了解網頁中每個區塊的設計目的。     但針對不斷創新的主流搜尋引擎來說,它們將需求更多詳細的資訊來貼近符合呈現使用者所搜尋的目標,因此語意標籤原有的資訊就顯得較為薄弱,也為此 Yahoo、Google、Bing 等公司,一同合作規範 MicroData 的標準格式 Schema.org ,主要希望能引進幫助機器更精細判讀的共同格式。   以下是 Microdata 主要使用屬性 :     itemscope : 將html內的attribute定義為item,指定這個項目是代表什麼的時候就是加入itemscope 這個屬性,此屬性是用來告知這個標籤的內容是跟某個項目有關的。     itemtype : 定義item的種類(在schema.org中有各種類的介紹),在設定完itemscope 項目後,必須再加上 itemtype 這個屬性,並且將值指定為 schema.org 網站上關於這個類型的 URL 。     itemprop : 描述item的屬性,完成前兩項定義與連結動作後,便可以開始針對要標記項目的相關屬性加上標記。使用方法為,在標籤上加上 itemprop 屬性,而其值則指定為「屬性的名稱」,例如 itemprop="name" 便是用來告知項目的「名稱」。                 本站在"網頁結構化資料-實際應用範例說明"中也提出了相關使用例子提供參考。   瞭解了 Microdata 主要使用屬性後,該如何使用對應類型的屬性,應該是較多人的疑問,在 schema.org 中文站當中,也詳細的說明了對應資訊,如:   常用的類型:      創造性工作:創意工作,書書,電影電影,音樂錄音,食譜食譜,電視劇TVSeries ...      嵌入式非文本對象:音頻AudioObject,圖像ImageObject,視頻VideoObject      事件 Event      醫藥和健康類型:MedicalEntity 詞彙。      組織機構      人物      地點Place,本地商戶LocalBusiness,餐館Restaurant ...      產品Product,售價Offer,均價AggregateOffer      評論評論,綜合評論AggregateRating  等資訊,也定義了一系列原始數據類型,比如數字,文本等等。    在建置網站時,先根據對應的類別進行結構化標籤設定,資料設定的愈加詳細, 搜尋引擎可以查證、解析、收錄出來的「基因關係圖」就會愈加完整, 自然也能有效提升SEO的效益。  
  由網頁結構化資料-實際應用範例說明中,我們能明白一個網站中可能同時存在著不同種類的結構化標籤,而不同種類的結構化標籤所代表的功能性也不進盡相同,本次也將針對於常見的結構化標籤種類及應用進行簡單的說明。   結構化標籤種類主要可分為"行內撰寫"與"外嵌引入"兩種形式,   常見行內撰寫的標籤種類為:   MicroFormat - 主要應用在(X)HTML中的 class(CSS) 名稱設定,逐漸少人使用。   MicroData - 可以應用在 HTML5 的常見技術,主要提供搜尋引擎查證、解析、收錄,因為受到各家搜尋引擎公司認同,因此Yahoo、Google、Bing等公司,一同合作規範 MicroData 的標準格式 Schema.org ,是較為主流的標籤格式。   RDFa - 是由 W3C 所制訂推薦的標籤格式,同樣支援 HTML5,可以擴充(X)HTML的屬性,也是較為主流的標籤格式。   Open Graph Protocol - 是 Facebook 制定的 HTML Meta 標籤格式,主要提供網頁的標題、縮圖、描述等資訊,Facebook 也藉由讀取其中的資訊將網頁內容摘要的型態轉載應用,也陸續有許多網路平台將其加入支援,因此是近年來較為重要必須的標籤格式。     外嵌引入:    JSON LD - 是以 JavaScript 語法為基礎,可由原有的 JSON 格式解析外嵌型的標記方式,結構較為簡易好維護,可與 MicroData 共通 Schema.or 格式,逐漸有許多主流搜尋企業推從,是未來可能取代其他格式的趨勢標籤格式。  
在上篇"網頁結構化資料是什麼"中,我們說明了設定網頁結構化資料主要是為了提供搜尋引擎正確歸類收錄、顯示資訊為用途,瞭解了網頁結構化資料主要的用途後,本次將以實際範例作為說明希望讓大家能更簡單且清楚的方式來理解。   由網頁原始碼中可以先瞭解,基礎的頁面設定,在基礎設定中 Og meta tag 是由現今主流的Facebook 所制定解析專用的結構化標記,用途便是有利於Facebook 搜尋引擎收錄及插件(分享、轉貼)時能自動對應格式應用的結構化標記。    在基礎頁面 meta 之外,現今較常應用的 Microdata 結構化標記,主要應用在頁面與網站的階層結構上,有利於搜尋引擎對網站整體的階層瞭解與收錄。  
  網頁結構化資料是什麼?相信大多數人都有使用過搜尋引擎尋找過資料,搜尋結果列表出來的資訊會盡量貼近符合搜尋的關鍵字,而搜尋引擎又是靠什麼資訊去歸類排序網際網路廣大多元的資訊呢?其中最主要的歸類方向便是"網頁結構化資料",網頁結構化資料簡單來說就是網頁最基礎的編輯資訊,也是我們在搜尋排名常看見的網站說明資訊,這些說明資訊不僅提供了搜尋者閱讀查證資料是否符合之外,更提供了搜尋引擎進行歸類排序等用途。    一般人可能會認為大多數搜尋引擎都會自動收錄基礎閱讀資訊,又為什麼需要額外在結構化資料著墨呢?原因在於大多數搜尋引擎在收錄時只會針對簡單的基礎資訊進行收錄,而大部分網站若沒有將進階資訊設定到正確對應的收錄位置時,就少掉許多貼近關鍵字訊息的資料,自然在歸類與排名上會顯得較為模糊薄弱。      從圖片資訊中能發現,搜尋較為明確方向的關鍵字時,搜尋引擎也會把結構化資料顯示得更加符合貼近,因此"網頁結構化資料"在 SEO 上算是最基礎的頁面資訊,卻也是極為重要的關鍵資訊。
  本站先前介紹過Google Analytics分析-看見網站績效的說明,從 Analytics 追蹤分析當中,我們瞭解到訪客在網站當中的操作喜好與閱讀效率等詳細資訊,可以進而作為網站營運優化的指標,因此對於網站管理人員是有著極大的幫助分析工具,而本次將進階推薦介紹由 Google Analytics 延伸的 Page Analytics 單頁網站流量分析擴充功能。    Page Analytics 是由 Google Analytics 原本的追蹤權限資訊做為延伸的擴充工具,主要是應用在網站"單頁畫面"進行流量與連結的統計與說明,讓管理人員能夠在網站每個畫面中一目瞭然的清楚知道連結應用資訊,得達精確的訪客應用效率,所以網站在原本申請並置入過追蹤碼後,便能透過安裝工具直接做使用(若尚未安裝過追蹤碼可參考文章開頭連結進行設定),擴充工具可以從 Google Chrome 瀏覽器的"線上應用程式商店"搜尋 Page analytics 找到申裝資訊。   在安裝擴充工具後,可以透過瀏覽器左上方的開關圖示進行快速開關查看頁面資訊。
  根據資策會及全球許多具有公信力的網路平台、廣告公司等,都發表了關於行動裝置在網際網路中實際使用流量的佔有例已經超越了傳統桌上型或筆記型電腦裝置,根據多家網站線上品牌管理服務提供商,公佈2017全球網路使用裝置趨勢調查報告中指出,全球約有二分之一的人口擁有智慧型手機,超過一半以上網路流量是來自行動裝置,其中又以"網站瀏覽、社群聯繫、APP資訊應用"為主。    從使用者習慣與行動流量的分系報告中能瞭解,網站瀏覽與社群聯繫的應用佔據了全球大部分的流量,因此社群網站也逐漸跟一般網站進行相容結合,由最常見的例子:一般網站透過資訊的升級與整合後能透過分享功能將訊息轉載至Facebook中,可以從這樣的跨領域合作中發現,原本是不同領域的網站類型卻能在相互應用後能夠互相豐富彼此的資源,因此本次本站將簡單說明網站如何透過資訊升級與整合後能分享至Facebook的方法。    Facebook應用了傳統網站的meta資訊進行延伸讀取應用並分享至大眾社群,而傳統網站只需要在原有的meta資訊中加入對應 Facebook需要讀取的 Open Graph protocol 標記語言,相關資訊便能透過分享功能將自己的網站推廣至社群網站中,以下將示範說明需要加入的meta資訊:        <meta property="og:url"                content="https://原網站連結(ex:webdesigns).com" />     <meta property="og:type"               content="website" />     <meta property="og:locale"             content="zh_TW" />     <meta property="og:title"              content="網站標題" />     <meta property="og:description"        content="網站簡短文字說明。" />     <meta property="og:image"              content="縮圖的連結位置" />
  Google 重視的 HTTPS ,Google在2017年的一月開始,針對網站是否加入 SSL安全憑證 的態度逐漸強勢影響 SEO 的發展趨勢,由本站先前分享過的"淺談網址 HTTP 與 HTTPS 的差別、SSL 與 HTTPS 的相關性",當中介紹了 HTTPS 透過了 SSL安全憑證,能夠有效保障了網站與使用者在連線上的資訊安全。    因此全球最大的搜尋引擎企業 Google 為了保障使用者的資訊安全,對 HTTPS 協定技術也有著高度的重視性,由瀏覽器Chrome網址列上,針對網站是否使用 SSL 安全協定,明顯的標示了:安全、不安全、危險,3種不同資訊安全狀態,讓使用者們能由此直覺的瞭解決定是否停留觀看網站內容,透過 HTTPS 這項技術指標分類後,讓網際網路上,數以萬計的網站瞬間被明確歸類。    Google 除了透過瀏覽器顯示區分網站之外,更令 SEO優化必須要注意的重點在,搜尋引擎收錄程式將會針對有使用 HTTPS 協定的網站進行優先收錄排序得動作,簡單來說就是有SSL憑證的網站將很有機會比沒有憑證的網站搜尋排名來的好;除此之外,如果在收錄程式偵測完後發現網站內有需要使用會員帳號密碼做登入,卻沒有使用SSL安全憑證技術的網站,甚至可能會被搜尋排名剔除之外,從以上這些方面能夠瞭解,網站加入 SSL 安全憑證,是未來 SEO優化的重要趨勢,若要保持網站優良的呈現,也趕緊加入HTTPS的行列吧,若以上有相關疑問或 SSL安全平憑證的需求也歡迎聯絡我們,本站將會竭盡服務。