那些影響排名的 Meta Tag

在網站中，我們可以利用 Meta Tag 來提供一些網站的基本資訊，並且一定性的影響搜尋引擎上的顯示以及排名

1. Charset 字符集：網站編碼，基本上 UTF-8 是支援度最高的編碼，沒意外不會改動。

<meta charset="UTF-8">

2. Viewport 視窗：正常來說，width 都會是 device-width，但一些早期的網站會將 width 改成是一個他們希望的最小寬度，若視窗小於那個寬度將會把網站整體縮小，以此規避 RWD 的問題。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Description 描述：提供一些網站的基本描述，會顯示在搜尋引擎中。

<meta name="description" content="網站描述...">

4. Keywords 關鍵字：目前 Google 已經確認不使用此標籤，因此除非想要幫助其他爬蟲了解自己的網站，不然沒必要使用此標籤，曾經有案例是因為塞太多內容被認為刻意操控 SEO 因此還被降分的案例。

<meta name="keywords" content="keyword1, keyword2, ...">

5. Author 作者：網頁的作者

<meta name="author" content="author1">

那些影響社群的 Meta Tag

相信大家都有在社群軟體中分享過網址，有些網址分享後會長出一格內容，裡面有標題、縮圖和敘述，有些網址發出去後什麼都沒有只有一串文字，這些也是 Meta Tag 造成的，其中目前通用的前綴為 og(Open Graph)。

Open Graph 是由 Facebook 提出的設定，官方翻譯為「開放社交關係圖」，後來由於它的開放性和便利性變成一個通用的設定。

其一開始的目的是當你在 facebook 分享網址後，可以出現文章縮圖以及標題和描述。與我們上方提到的 Tag 不同，og Tag 基本上不影響 SEO 排名，但當你的 Open Graph 有做好，能夠吸引使用者點擊進來，並且若內容符合他們預期能夠提升他們的停留率，更甚者因而帶動他們對你網站內其他內容有興趣，降低跳出率這樣就能夠更加提升你的網站排名。

Meta 自己也有一些對於網站上 og Tag 的建議，這邊就介紹些基本的內容，如果有興趣的可以自行前往Meta 頁面去了解，就讓我們開始介紹吧

1. og:site_name 網站名稱：雖然這不是 Meta 說必須的 Tag，但基本上各大內容網站都會有放。主要用途是用來區分網站標題跟網站名稱，像是下圖，Title 表示這篇文章的標題，Site Name 表示這是哪個網站

<title>Webmasters - Sharing - Meta for Developers - Facebook</title>
<meta property="og:site_name" content="Facebook">

2. og:url 網站網址：網頁的標準網址，由於網址很常會被帶上一些個人識別的參數或是語系設定，因此為了確保所有的 url 都是導向同一個地方我們可以透過 og:url 來統一入口

<meta property="og:url" content="https://developers.facebook.com/docs/sharing/webmasters/">

3. og:title 網站標題：通常 title 會是用來針對搜尋引擎的標題講求的是準確和精簡，而 og:title 的會是更加具有吸引力的標題，但若是太過於標題黨想把人騙進來導致跳出率提高反而會本末倒置

<title>10 種健康的早餐食譜 | 健康飲食博客</title>
<meta property="og:title" content="10 種早餐食譜，你一定要試試！輕鬆開啟健康的一天">

4. og:description 網站描述：與 title 一樣，og:description 同樣是為了提高分享時的描述生動性而產生的屬性

<meta name="description" content="發現巴厘島的最佳景點，從壯觀的海灘到隱秘的寺廟，這裡有你在巴厘島必看的地方。計劃你的下一次夢幻之旅吧！">
<meta property="og:description" content="夢想中的巴厘島之旅，這裡有你絕對不能錯過的景點清單。無論是冒險者還是放鬆度假者，巴厘島都能滿足你的所有期待！">

5. og:image 網站縮圖：與 favicon 不同，og:image 主要是當你在分享連結時會出現一張縮圖，可以用來表明此網站的用途，提高使用者的興趣

<meta name="og:url" content="https://developers.facebook.com/docs/sharing/webmasters/">

6. og:type 網站類別：透過 og:type 可以讓社群網站知道你這個網站在講述大概哪類內容，可以透過一些優化的版型來顯示，若沒設定預設值為 website，常見的還有像是 article, product, music.movie, video.movie, ... 之類的型別，如果有興趣可以去官方文件查詢～

<meta name="og:type" content="article">

今天把大致上常見的 Meta Tag 介紹一遍了，在 Google 的排名方式越來越聰明的情況下，單純透過 Meta Tag 來進行 SEO 已經是一種過時且無效的方法，主要還是要透過高質量且高吸引力的內容來吸引使用者，讓上面提到的 "點擊率", "跳出率", "停留率" 的數字更加漂亮，讓使用者更願意在網路上分享你的網站產生 Social Signals(社交訊號)，提高排名讓你的網站曝光度更高。

明天將會介紹該如何使用 html 標籤讓你的網站更佳符合 SEO 的形式，主要為 html 語意化。