文章專區

SEO與搜尋行銷相關

 本站先前也介紹過PageSpeed網站速度與SEO的重要關係,主要是由 Google 針對網站體驗的載入進行友善評比、測試與建議,從行動裝置日新月異的發展,瀏覽網站的裝置比例由原來單一的桌上型裝置改變成行動裝置成為主流,身為搜尋引擎龍頭廠商及Chrome瀏覽器的高市佔率,Google 更加重視網站在行動裝置上的體驗,因此在 PageSpeed 網站體驗分析之後,更推出了只針對行動裝的體驗測試的專屬功能 Test My Site With Google :https://testmysite.withgoogle.com/intl/zh-tw,由這項功能把網站發展帶領至行動裝置載入速度為優先考量的趨勢。    Test My Site With Google 這項行動裝的體驗測試的專屬功能與 PageSpeed 網站體驗分析同樣都會針對網站的基本元素 CSS\HTML\JavaScript 是否壓縮進行檢測。    除了基礎的元素之外,Test My Site With Google 體驗測試和與 PageSpeed網站體驗分析最大的差異在於,Google考量了現實環境中行動網路技術的發展(一直到2020年,全球各地70%的行動網路只到3G的執行速度),因此Test My Site With Google 體驗測試加入了標準行動網路(3G)的連線測試。    在包含了行動連線之外,更考量了行動裝置視窗大小不一的問題,真對網站內容在行動視窗上呈現的友善、易讀性進行瞭解、評估。   還加入了其他相似網站的相關評比動作,讓網站的檢測不再只是閉門造車,讓網站的成長格局更加廣闊。   比較得特別的地方在於,此項測試功能將分析的成果分為簡易的連線速度測量、客戶流失率原因,和需要經由"信箱"取得的詳細報告。       透過信箱取得的詳細報告內容包含了:看來沒問題、建議修正、應該修正 評比與建議。網站便能針對這些行動體驗項目更加精進。  

ARTICLE

2

SiteMap是什麼?

   SiteMap 是意指"網站導覽"又稱為"網站地圖",用途為顯示網站內所有的頁面連結資訊架構,在 SiteMap 的形式當中又分為( html、asp、aspx、php )及 XML 兩大主要格式,在兩種主要形式當中( html、asp、aspx、php )多用於製作呈現給一般訪客在瀏覽網頁內容時查看使用(似書本摘要目錄),而 XML 是針對搜尋引擎所制定的導覽格式,主要用於列表整體連結協助搜尋引擎針對網站的所有頁面進行審查和收錄。     站在 SEO 網站優化的角度上, SiteMap 的建置又以 XML 蔚為重要,在新網站建置完成上線後,雖然搜尋引擎會透過爬蟲程式收錄網站資訊,但在面對架構複雜、連結較多的網站需要有較長的查詢時間且容易有收錄不完整的情況,因此透過 SiteMap 的建立與提交,能夠協助搜尋引擎較快速的得到網站完整資訊,也能幫助網站可以更快速的讓一般使用者查詢觀看。     XML 格式的 SiteMap內容較為簡單,撰寫上可以自行製作,但連結資訊較為豐富多元的網站也有相關工具能夠協助自動產生SiteMap檔案,如:https://www.xml-sitemaps.com/     在製作產生完sitemap檔案資訊後,可以透過先前介紹過得的 Google Search Console 網站管理工具進行提交及驗證     從以上提交與驗證後便能發現網站的資訊是不是能完整被搜尋引擎給收錄編列,在一個好的網站規劃中,如果能同時擁有以上兩種 SiteMap 呈現型式也將會對於網站優化(SEO)有著極大的幫助喔!  
   Google Search Console Beta 來囉!先前介紹過 Search Console 網站管理工具,是由 Google 所開發的一套免費網站管理工具,在接觸網站行銷 與 SEO (收尋引擎最佳化) 時,是大多數管理人員必定使用的網站管理工具,在 Webmaster Tools 經歷更改名稱為Search Console 之後,就很少有重大的變更, Google 在2018年1月新的一年開始,也發布了新的改版介面,相信許多網站管理人員都收到了"歡迎使用新版 Search Console 管理資訊"的連結通知信件,就讓我們一探這次有什麼改變之處吧。   另外在舊版畫面當中也會看見切換新版介面的相關連結     在改版後的功能當中,主要還是延續了先前網站經營的"成效"與"索引"兩大指標,在畫面的呈現上維持了摺線圖數據,從功能選擇上有了比較自由的數據比對方式,當中比較特別的是,以往只有保留三個月的數據,本次更改為16個月的保留數據,在數據量化下的比較後,更能讓管理人員掌握網站的長期營運動態,是一項值得研究參考的功能。         索引指標部分,算是本次較多的改變重點,以往的索引介面只有較為基礎的索引狀態和封鎖的資源,而改版後以索引涵蓋範圍來呈現,細分了錯誤、有效但出現警告的網頁數、有效頁數、排除頁數,也針對更細部的資訊進行分析顯示,是較為增加內容的功能。     在本次更新中,Google Search Console是打著 Beta 公測,讓廣大的管理人員們也能從新舊版本互相切換適應使用,其中也有些區塊涵蓋了舊功能畫面的連結或顯示著即將推出的標示,等於賣了一個關子給所以管理人員們,就讓我們一起期待更棒的新功能一一解放吧。  
   Google Search Console 與 網頁結構化資料的應用,先前在分享網頁結構化資料是什麼?時,說明過網頁結構化資料主要是協助搜尋引擎在收錄網站時能將進階資訊設定到正確對應的收錄位置,而本次將結合先前介紹過的網站管理工具 Search Console 來針對網頁結構化資料一起進行標記、追蹤、統計管理。     Google Search Console 透過驗證與追蹤的方式,會自動針對網站內已經設定好的網頁結構化資料進行掃描並偵錯,讓網站管理人員們能夠清楚的看見網站在搜尋引擎上的收錄狀態,其中所收集的資訊也包含了網頁結構化資料的狀態性:   透過結構化資料的追蹤,網站管理人員能夠隨時簡單又清楚的瞭解網頁結構化資料狀態,好確保網站運行的正確性。      另外先前介紹過的結構化標記-協助產生工具,也在 Google Search Console 以資料螢光筆功能中提供協助標記 以上透過 Search Console來標記、追蹤、統計,也省去了額外結構化標記測試的步驟,能使網站管理人員能輕鬆且快速的對整體網站結構化資料進行統整,是非常便利的整合功能。  
  在上篇結構化標記-協助產生工具的介紹中,我們分享了實際操作時,能協助網頁結構化標記的 Google 結構化資料標記協助工具,使您就算是第一次進行標記的網站管理人員也能根據步驟快速上手,但在設定結構化標記時我們分享過結構化標籤的常見種類並不是只有單一的形式,標記的架構可能會隨著不同網頁的性質與功能和格式在設定的結構層面上會使用不同的標籤種類標示,因此,我們在使用了標記協助工具後,仍然有可能在層級上有些誤差,為了對於較為陌生的設定人員可能沒辦法立刻察覺,而本次將針對網頁結構化設定後得檢測進行介紹。     Google 在設計結構化資料標記協助工具的同時也貼心的設計了,結構化資料測試工具(https://search.google.com/structured-data/testing-tool/u/0/),其中可以選擇貼入網站網址或網站需要標記的程式碼進行驗證,提供網站管理人員在標記網站結構化資料後,能夠有進一步的確認。    
 先前曾分享過網頁結構化資料是什麼?的原理與用意也介紹過網頁結構化資料常見的格式種類,相信大家對於網站結構化資料有了基本的認識,同時在本站中,也有較詳細針對 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 格式,逐漸有許多主流搜尋企業推從,是未來可能取代其他格式的趨勢標籤格式。