SEO優化自己來：五分鐘搞定meta tag
6個步驟完成網頁meta tag撰寫，做好數位世界的Elevator Speech
隨著資訊技術普及，大家對SEO的認知也越來越專業了，三不五時，就會非資訊背景的有朋友問我SEO優化的問題，不過meta tag的部分，網路上已經有很多教學了，所以我只想分享懶人作法……讓第一次撰寫meta tag的人可以馬上上手。meta tag是SEO的基礎，我在承接客製化的Landing Page行銷頁時，常常需要撰寫這個部分，才能讓客戶的網站在各個平台上都能呈現適當的圖文摘要。當工程師提到常常需要撰寫，就表示該認真思考Reusability，提高生產力，而這篇文章就是我重複N次工作後得到的速成法。註：SEO是搜尋引擎最佳化(Search Engine Optimization) 的縮寫，泛指讓網路世界能正確解讀你的網站的方法，也是數位行銷不可或缺的一環。
以前，我們可以說meta tag是讓搜尋引擎看懂你的網站，但現在facebook有自己的meta tags、Twitter也有自己的meta tags，meta tags越來越繁雜，前端工程師往往需要認真閱讀每個tag的定義，如同下文所述：
如果你是第一次寫meta tags，看完類似的教學文後，你通常需要花點時間撰寫html code，再到各個平台上測試結果，中間修修改改、來來回回，其實頗費神，加上有些tag已經被淘汰，或者更新後不適用了，你可能又讀了兩三篇文章才找到正確的撰寫方式。
6個步驟完成網頁meta tag撰寫
所以好技巧不藏私，以下分享我的方法。
【步驟1】 — 判別你的網站類型
網站類型有很多種，可能是Landing Page、部落格、新聞、個人作品集、公司網站、購物官網，根據你的網站而定，也有可能是同時有部落格功能也有購物功能的複合型的網站。
【步驟2 】— 找出經典案例
根據你的網站類型，找出一個經典的、國際的、第一名的代表企業。
例如部落格可以挑Medium、新聞就商周、數位時代、CNN等等，個人作品集可以找Linkedin、公司網站就根據產業別，可以是Apple、Rolex、Gucci等等。
【步驟3】 — 在Chrome中開啟你挑選的網站
假如你的網站是新聞類型的網站，以CNN為例，在網頁上按下右鍵->檢視原始碼(View Page Source)
複製原始碼內容：
【步驟4 】— 整理程式碼
使用程式碼排版工具：https://dirtymarkup.com/
把剛剛複製的程式碼內容，貼到排版工具中，並按下藍色的Clean按鈕，即可得到一份整理好的HTML原始碼：
【步驟5 】— 挑出meta tag的部分
你會發現你已經拿到所有需要的meta tag了，像是Twitter的部分：
<meta content="Chemical weapons experts blocked from Syrian attack site, UK says" name="twitter:title">
<meta content="They've waited two days to enter the site of the latest suspected chemical attack, where dozens of Syrian civilians were killed." name="twitter:description">
<meta content="summary_large_image" name="twitter:card">
<meta content="https://cdn.cnn.com/cnnnext/dam/assets/180226140921-03-syria-reported-chemical-attack-super-tease.jpg" name="twitter:image">【步驟6】 — 把meta tag改成你要的樣子
因為內容已經很明顯說明了meta tag的意義，我們通常可以不用翻官方文件就可以把它改成我們想要的內容，以下摘要Twitter的部分：
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="需要將系統委外開發?艾菲肯是您最佳的系統承包夥伴" />
<meta name="twitter:image" content="https://www.efacani.com/efacani_Introduce/images/subscribe-images-slogan.jpg" />
<meta name="twitter:image:src" content="https://www.efacani.com/efacani_Introduce/images/subscribe-images-slogan.jpg">
<meta name="twitter:site" content="@Efacani" />
<meta name="twitter:creator" content="@Efacani">
<meta name="twitter:description" content="艾菲肯有豐富的開發經驗，涉略加密貨幣系統開發,區塊鏈技術應用,跨領域系統整合,網頁設計,網站建置,數位行銷,網站架設等各種資訊應用系統。是您最佳的系統承包夥伴。">唯一要注意的是Twitter要寫個robots.txt檔，放在網站根目錄：
User-agent: Twitterbot
Disallow: *Allow: /images <-指定抓取圖片的目錄
把所有的meta tag改成自己的版本，就大功告成了。
總結
知名的大型企業，絕對不會忽略SEO優化，規則一有變動，通常也會馬上更新程式碼，所以直接鎖定所屬產業的代表公司，複製他們的meta tag，基本上就萬無一失了，而新聞媒體和公司形象網站的meta tag會有些許差異，所以記得一定要選和網站產業別接近的網站。
同樣的道理，你也可以用檢視原始碼的方式去比較自己的網站和知名企業的網站，在meta tag上的撰寫是不是一致，如果你使用的是wordpress的SEO Plugin，你可能會發現有些Plugin並沒有辦法設定所有的meta tags，這時可能就需要想辦法修改原始碼了。
以艾菲肯的Landing Page：https://efacani.com/landing為例，看看是不是萬無一失？
Medium的呈現結果：
幾個主要通路的呈現結果：
以上方法應該適用大部分的案例，當然有一些複雜的情境，例如我們希望訪客使用手機裝置時把Title改短一點，或者新聞媒體的時間戳記是需要利用後端系統自動產生的，這些都需要特殊的處理，不過一樣可以透過上述方法，從代表性網站中拿到一個template去修改，依舊事半功倍。
補充：Facebook的呈現內容如果有問題想修改，請記得使用分享偵錯工具手動刷新結果，才有辦法顯示最新的meta tag內容，由於網頁有cahce，所以請盡量以無痕頁面開啟網頁，才能看到最新的修改結果：艾菲肯承包案例分享：BiiLabs.io Landing Page：
艾菲肯承包案例分享：Efacani.com Landing Page：
SEO優化中最基礎的meta tag撰寫，就如同網路世界版的電梯行銷（Elevator Speech），你如何運用短短幾秒的時間，將重點傳達給潛在的客戶?
當你送出網站連結的那一刻，無論是透過Line、Wechat、Twitter上自動產生的圖文摘要，還是搜尋引擎中顯示的網站描述，都至關重要！
五分鐘系列文分享：
我是James，一位自由接案工作者對於軟體開發與接案工作充滿熱忱，截至2018年，不知不覺已經累積11年的時間在這個領域打轉，擁有6年的接案經驗。 寫作是我一個新的嘗試，初衷是希望能讓這個環境變得更好，從三個面向出發：1.個人：強化團隊成員的生產力與技術力，提供技術觀點與教學、工作方法等硬實力。
2.組織：培養良好的團隊合作態度與企業文化、分享合作與溝通技巧。
3.社會：讓客戶、發包單位知道如何有效處理系統外包，把資源花在刀口上，並透過接案經驗分享促進良好的合作。ＦＢ粉絲頁：艾菲肯先生——您最佳的技術夥伴
個人刊物 ：艾菲肯先生的咖啡時間
工作室網站：Efacani.com
