SEO 搜尋引擎優化，頁面調整學習心得與教學筆記 @ 小雕雕的家

Format	Description and Placement	Supported Data Types
JSON-LD (Recommended)	JavaScript notation separate from the body of the HTML itself. Markup is placed inside a script tag in the head of the HTML page. The markup does not have to be interleaved with the user-visible text, which makes nested data items easier to express, such as the Country of a PostalAddress of a MusicVenue of an Event. Also, Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.	All public data types.
Microdata	An open-community HTML specification used to nest structured data within HTML content. Like RDFa, it uses HTML tag attributes to name the properties you want to expose as structured data.	All data types
RDFa	An HTML5 extension that supports linked data by introducing HTML tag attributes that correspond to the user-visible content you want to describe for search engines.	All data types

官方是建議使用 JSON-LD

但除了這幾種方式，google 也幫看不懂程式碼標籤與 JSON 的人想好了

可以使用資料螢光筆去描述網頁結構，然後搜尋引擎就會依照這個結構的範本去幫你結構化

因為操作實在很簡單，所以就不說明，打開 Google Search Console，新增一個標記就對了

就會讓你用螢光筆標記你的網頁

結構化資料舉例來說，有以下者些

a. Breadcrumbs (麵包屑)

https://developers.google.com/search/docs/data-types/breadcrumbs

設置完之後大概過幾天，應該就可以看到結果，google 搜尋結果會呈現你設定的階層，如下圖範例

b. Sitelinks Searchbox (附加搜尋框)

https://developers.google.com/search/docs/data-types/sitelinks-searchbox

你網站下面就會出現搜尋框，但不知道為什麼，我加了是沒有出現啦

可能是網站排名還太低

c. 其他結構化資料

因為實在太多了有點懶得寫，而且這篇不是結構化資料教學

依照網站頁面的屬性也不見得都用的到，所以請自行去官網查詢

https://developers.google.com/search/docs/data-types/sitename

下圖那些都是

結構化資料測試：

每個結構化資料下面都會有範例，可以點進去摳來改一改就好了，點下圖那個 SEE MARKUP

如果不清楚屬性，文件下面也有說明

但當你設定完之後要怎麼知道有沒有設錯呢?

有兩種方法，第一種是主動的去結構化資料測試工具測試

https://search.google.com/structured-data/testing-tool

輸入網址，測試完之後結果就會顯示在右邊，如果有錯誤就修正

第二種方法就是去 Google Search Console　看結構化的結果

14. 使用 HTML5 語意標記

例如：<article>、<aside>、<nav>、<header>、<footer>....等等

HTML5 不是用來讓網頁可以被搜尋引擎自動擷取資料的，但可以告訴搜尋引擎了解網頁配置邏輯

HTML5 常用的標記可以參考

https://www.w3schools.com/html/html5_semantic_elements.asp

15. 設置社群語意標記

例如：facebook、twitter　的語意標記

facebook 可以參考之前寫的這篇

Facebook 設定分享網頁的標題 + 內文 + 圖片

twitter 可以參考 twitter 官網

https://dev.twitter.com/cards/getting-started

設定社群語意標籤，如果使用者分享你的頁面時會有更好的效果

也會引起更多人的興趣到你的網站瀏覽

優化電子商務網頁的方法

除了以上的那些方法外，針對電子商務型網站也有幾點要注意

1. 商品頁的網頁標題，必須要有商品名稱及產品型號

大部分使用者要購買商品的時候都會先做功課，然後在搜尋引擎打商品名稱或型號查詢

所以網頁的標題最好要是商品名稱或型號、廠牌

2. 強化商品描述內容

搜尋引擎最不喜歡單薄的內容，所以強化商品的介紹，是電子商務網站最重要的項目之一

但是可能因為這個商品是廠商提供，別的網站可能也有賣，所以常常會發生商品介紹重複的問題

如果可以的話，盡可能產生獨特的描述會很有幫助，又因為搜尋引擎沒辦法從圖片中了解商品

所以最好可以用文字建立獨特的描述 (理想狀態)

3. 避免網址參數過於複雜

過於複雜的網址參數對於搜尋引擎優化來說很不利，會讓搜尋引擎感到困擾

因為搜尋引擎會需要了解參數的意義，因此過於複雜不是好事

如果那一堆參數有些可以忽略不影響結果，你可以到 Google Search Console 去設定網址參數

設定網址參數之後，搜尋引擎在爬網頁時就會忽略這些參數

網頁之間的連結調整

網頁與網頁之間的連結，是搜尋引擎排名的重要因素，在SEO操作上又被稱為是 Off Page

但要怎麼知道網頁的價值? 這個書上寫得太複雜了，這邊稍微提一下就好

很久以前大家是依照 page rank 來決定網頁的價值，但後來取消了 page rank 之後

有些較專業的 SEO人士會用以下幾個網站與參數來評估

Moz.com　的 MozRank、MozTrust、Page Authority、Domain Authority

MozRank (mR) 代表連結熱門度

MozTrust (mT) 代表信賴度

Page Authority (PA) 代表網頁排名強度

Domain Authority (DA) 代表網域排名強度

而 Moz.com 有提供工具可以讓你檢測，是 chrome 的外掛

https://moz.com/tools/seo-toolbar

安裝之後連結下方就會出現以上的數據 (有個鎖頭代表要付錢才能看)

以下列出書上有提到的工具，用來了解網頁價值

MozBar： https://moz.com/tools/seo-toolbar

OpenSiteExplorer：https://moz.com/researchtools/ose (moz推出的網路服務)

Majestic：https://majestic.com/

因為分析方式實在太深奧了，這邊就先跳過，大家有興趣再去買書 (文章末會列出書名)

首先從比較實務面的改善方式著手

1. 利用連外連結建立相關性

連外連結就是你的頁面去連別人的頁面，如果你連到的頁面具有權威性，那網頁相關性的強度就會增加

例如你有一個頁面，內容提到許多專業詞彙，然後將那些詞彙連結到 wiki 的這種作法

2. 利用分類、標籤與相關內容建立關聯性

搜尋引擎最喜歡的網頁是能夠自我組織的網頁，意思就是網頁結構能夠把相同主題的網頁兜在一起

所以網站內容要進行分類提供選單，而商品頁面可以在下方放置同類型推薦

3. 利用同時被引用來建立相關性

如果有一個網頁在內容中引用了 A頁面與 B頁面，那 A、B兩頁面就會被認為有相關性

引用的越頻繁，兩個頁面的相關性就越高

4. 建立容易被點選的連結

如果連結從來都沒有被點選過，或是點選的機率很低，那這個連結就是低品質的連結

低品質的連結無法建立相關性，所以如果存在很多這種連結，倒不如只留下少數會被點選的連結

要知道哪個是低品質的連結，可以用 GTM 來綁定事件觀看點擊數就可以分析了

可以參考之前寫的這篇：

利用 GTM (Google Tag Manager) 建立網站事件追蹤，並在GA報表中查看頁面區塊點擊

5. 利用語意標記建立相關性

如果網頁內有存在語意標記，搜尋引擎就不用花太多工去解析，語意標記可以參考上面提到的結構化資料

可以根據你的頁面內容，提供適合的結構化資料，例如下圖的這些類型

如果你是賣書或商品，就可以用Books 或 Products 去結構化你的商品資料

讓搜尋引擎知道你的頁面跟書有關

6. 利用 RSS連結建立相關性

這個是書上寫的，如果有人透過 RSS 訂閱你的網站，或是你的 RSS 被某個可信賴的網站加入頻道

就可以透過流量建立相關性，不過我想現在有在用 RSS 的人應該已經很少了

7. 利用有排名的頁面拉抬其他頁面

可以利用 Google Search Console 來找到這些頁面

這些網頁就是用來拉抬其他頁面的種子網頁

8. 在熱門頁面中安插連結到其他相關網頁

因為與該熱門頁面相關，因此除了可以建立相關性，還可以吸引更多使用者閱讀

透過 7、8這兩點，就可以逐漸看到其他網頁被拉抬起來，但缺點是無法快速的看到成效

必須來來回回的調整才可能出現成效

網站的執行速度優化

Google 曾經在 2010年發表過聲明，網站的速度、效能會影響到搜尋引擎排名

https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

這篇文章最末有提供免費工具讓你檢測，但一般常用的還是 Google 的 Page Speed

關於網頁執行效能的改善，之前有針對 Page Speed 寫過一篇文章了，Page Speed 有提供 Chrome 套件

或是直接線上檢測：

https://developers.google.com/speed/pagespeed/insights/

檢測出來的問題該如何修正，可以參考之前寫的這篇：

使用 Google PageSpeed Insights 為行動網站進行效能調校 [優化網站速度與體驗]

提供行動版網站

Google 在 2015/4/21 時宣布行動裝置可用性會被列為網站排名要素之一

所以通過他的行動裝置檢測就很重要，如果你的網站對行動裝置的支援度不好，就會被降低排名

然後你就會看到這行字，除了丟臉之外還會被降低排名

所以如果可能請盡量生一個行動版出來，或是做成 AMP頁面讓行動裝置適合瀏覽

AMP 製作方式請參考這邊：

https://developers.google.com/amp/

如果要針對行動裝置去做搜尋最佳化，可以參考官方文件 (中文版)

https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=zh-tw

裡面有分.....回應式網頁設計、動態服務、獨立網址，三種設計網頁方式的調整方法

因為自家的網站是屬於第三種.....電腦版跟行動版分別是不同網址，所以就要按照 google 說明文件調整

以避免兩個不同的網址，但內容相同的問題

擷取部分說明

詳細可以看這份文件來調整你的網頁

https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls?hl=zh-tw

網站使用 HTTPS

Google 在2015年年底有提出將會嘗試優先索引 https 網頁，聲明如下：

https://webmasters.googleblog.com/2015/12/indexing-https-pages-by-default.html

如果你的連結還是 http 的話，google 會試著嘗試有沒有 https，如果有提供的話就會優先索引 https 的網頁

以往電子商務網站都是在購物流程中才使用 https，而現在可以考慮全站都涵蓋在內

控制網頁容量大小在 125KB之內

Bing 的網站管理員 SEO 建議有提到

SEO 建議	HTML 的評估大小估計將超過 125 KB，有可能無法完整快取。
嚴重性	低
錯誤計數	17
未遵循的網頁	17
SEO 說明	如果網頁包含大量程式碼，搜尋引擎可能不會完整擷取網頁的內容。無關的程式碼會將內容推向網頁原始碼的下方，讓搜尋引擎編目程式取得的難度提高。 125 KB 的彈性限制可做為指引，以確保網頁原始碼中所有的內容和連結都能被編目程式快取。基本上，這表示網頁如果太大，搜尋引擎可能無法取得所有內容，或是可能無法完整快取它。
建議的動作	請確定網頁原始碼未在網頁頂端包含大量的 CSS 或程式碼。請考慮將程式碼與樣式移到個別的檔案中。