SEO 優化？ 先談談其中的 SEF

作者： -

什麼是 SEF ？

SEF ( Search Engine Friendly ) 搜尋引擎友善，也有人稱之為 Technical SEO（技術 SEO）。簡單來說就是讓拜訪網站的機器人比較容易作業的技能，在 SEO 裡面只能算是冰山一角。

工程師在工作上常常被主管要求改善網站的 SEO ，卻不能改變其中的文字與圖片，這算哪門子的 SEO，頂多只能算 SEF。SEO 是較為全面的行銷，可以延伸到 PPC 、整體文案內容、社群經營、線下活動、UI排版、UX...都會對 SEO 造成影響。

 對於說自己拚命改善 SEO 實際上只有做 SEF 的人，我真的不知道要怎麼溝通，因為 SEO 主要還是靠內容與其權威性。


扯遠了，還是回來看 SEF 吧。

HTML Meta tag

  • title：網頁名稱。就如它的名稱，是這個網頁頁面的標題，也是在搜尋結果中呈現的名稱。
  • description：網頁描述，雖然在SEF中的比重極小，但還要要填。 
  • property="og:xxx"：Facebook 中呈現的樣貌。在台灣 FB 就是最大的社群網站，你不得不服。當然還有像是 twitter 之類的社群網站也有它們專用的 tag。詳見：The Open Graph protocol 和 twitter cards。
以 SEF 的角度來說，title 和 description 這兩個是必要的，當然還有像是 charset、http-equiv、viewport 這些必要的東西，不過這三個會影響 RWD 的東西有誰不知道要加嗎？

 你說 robots 跟 keywords 呢？基本上 robots 只有在你要下 nofollow 或 noindex  的時候才會用到；keywords ....都 2017 年了，別再考慮這個東西。

HTML Link tag

  • canonical：指向的網頁，跟網頁權重有關。比方說，一個頁面有上百筆資料，你想一次呈現 10 筆，然後靠網址的變動程現不同筆的資料，這些網頁就需要加上這個避免流量分散。
    另一個情況是「桌機、行動裝置」網頁，因為這兩頁內容相同，也必需加上這個 tag 指向其中一個主要的網頁，要不然會打架互相搶流量與重覆內容被 google 打槍，其中之一在搜尋引擎消失(桌機只找到手機版網頁這種尷尬情況)。詳見：標準網址 。
  • dns-prefetch：可以預先加載第三方的 JS，例如 Clarity、 GA 等。
  • preload：也是預先加載的方式之一，但這是針對自己站內的檔案。詳見 MDN 寫的說明。
其它還有像 shortcut icon、search、apple-touch-icon-precomposed...這些就因人而異了。
順帶一提，shortcut icon 不一定要用 ico 檔，你可以這樣寫：

<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="/img/favicon.png" type="image/png" sizes="180x180">
<link rel="shortcut icon" href="/img/favicon.png" sizes="180x180">


HTML5

每個 HTML tag 都有它預定的任務，當然你要從頭 div 到尾也沒有什麼不行。不過，既然它都提供那麼多種類的 tag 了，不用一下嗎？

  • h1~h6

    類似主標題與副標題這類的權重概念，h1 的權重接近 title ，且最好一頁只有一個。要操作關鍵字的話，除了內容之外這些 tag 就是你的好朋友。

  • header、main、footer

     語意化的HTML：類似 table 的 thead、tbody、tfoot。

  • section、article、aside、nav

    一樣是語意化的HTML：前兩者類似段落的概念，可以互包，aside 類似側邊欄之類的輔助內容，nav 類似 menu。

  • a tag 的 rel Attribute

    如果你走火入魔的話，可以把 target="_blank" 開新分頁的方式加上 rel="external" ，另外 W3C 認為開新分頁是對使用者不友善的行為。這點我語帶保留，看連結的功用是什麼。
    其它 rel Attribute

    至於 target="_blank" 有安全性與性能問題，可以在 rel 加入 noopener 解決 (firefox是 noreferrer，所以也會看到兩種都加的開發者 rel="noopener noreferrer" )，確保其安全性。

少用 style Attribute

網頁效能會吃比較多。這點不光是 SEF 的問題，還有程式碼整潔度與維護性的問題，下略一千字。


盡量不要用 JavaScript 產生內容

Rendering AJAX-crawling pages

 關於這點，Google 說他們的機器人對於 JavaScript 的解讀有所進展，至於進展到什麼程度並沒有明說。

當然，如果你用的是 vue、Angular、React 等常見的 JS 框架，在有做好 SEF 的前提下是沒有問題的。


CSS、HTML、JS 與圖片檔的大小

與網頁載入速度有關，其中圖片佔七成。程式檔線上的版本記得壓縮，圖片的話網路上也有各種無損壓縮的網站和工具。
你說因為要應對 retina 所以圖片兩倍大？孩子，HTML 還有 srcset 與 picture 給你選用。

 而 chrome 75 還支援原生的圖片延遲載入： loading="lazy"。

另外圖片和文字盡量分離，圖片辨識現在是找圖片附近的文字或 alt，如果文字直接畫在圖上機器人不會知道，不過未來就不一定了，畢竟google自己就有Vision AI這個產品。


內部連結要確實

機器人進入網站之後是靠連結在網頁與網頁之間移動，不要忘了讓你網站內的網頁能夠互相連結，不要讓某一頁變成邊緣人。若連結有用js寫功能，記得也要考慮no js 按下去到達的連結。

robots.txt 與 sitemap.xml

這就是非常單純的 SEF，因為就是做給 bot 看的，可以分成好幾個 xml 方便管理，例如讓一些站內搜尋結果不要出現在站外的搜尋引擎之中。而比較重要的還是給人看的 sitemap 頁面，除了能讓各網頁確實互連不形成孤兒外，也別忘了網站做出來是要給人用的。

讓網站收錄到 search console

search console 是 Goole 的一個網站狀態管理工具，可以簡單得知一些問題並做修改。而不只是Google而已，bing（yahoo）和 baidu 等搜尋引擎也有其自己的網站管理員工具可以讓我們使用。

 

結構化資料 schema 標記

讓機器人可以知道這一段 HTML 或 網頁是什麼類型的東西，讓搜尋引擎可以順利解析網頁內容，進而精準的提供符合搜尋引擎使用者的需求內容。

比較常用的方式：Microdata、JSON-LD 與較少見的 Microformats、RDFa。

Microdata 寫法是利用 HTML tag 的 Attribute 一層包一層。
JSON-LD 寫法則類似 object ，與HTML分離，這可以讓原始碼看起來整潔一點。
Microformats 則是用特定的 class name 作劃分，不會像 Microdata 因為一堆 Attribute 而亂槽槽。

這個網站有所有的類型與基本範例：https://schema.org/ ，org 後面加上 .cn 是簡中版，但不建議使用，因為內容少很多。或者你也可以看 Google 寫的範例，讀起來會輕鬆一點。
Google 也有提供測試的工具：結構化資料測試工具
* yahoo 和 bing 2018年7、8月左右開始看得懂 JSON-LD。

網站讀取速度

 不管是不是為了爬蟲，這都很重要。可以詳讀這篇〈網站使用體驗核心指標 LCP、FID、CLS〉的介紹。


結語

以上就是一些大家常常在優化的 SEF，在不是大企業或是高權重網站的情況下，拚死拚活做好SEF其實只是九牛一毛，對於SEO搜尋排名的效果非常有限，這也是我在文章開頭不知道怎麼對那些人溝通的原因。

 最後，你的網頁內容才是最重要的，好的網站就算沒有 SEF 也可以有很高的流量，當你在做網站 SEO 時，一定可以體會到見山是山，見山不是山，見山還是山；SEF 做到最好，沒有內容的網頁也只是搜尋結果的分母而已，永遠不會進入使用者的視線。 

另外，可以參考 GOOGLE 在 2017年12月寫的 SEO入門指南

留言

張貼留言

這個網誌中的熱門文章

用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！只要設定字體的最大值和最小值就可以辦到。 文章目錄： vw 基本運用 極限問題 Media Query max()、min() If you just want the best solution, just click "max()、min()" . 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; }
READ THIS »

10 steps、「ライブ会場を沸らせる、フロアを沸かす」ミーム動画の作り方 (Viggle AI)

作者： -
圖片
日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片帶你一步一步做，完全不用動腦。 （続いて英語でステップバイステップで説明します。操作手順動画も用意しているので、頭を使わずに簡単にできます。） 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). Select any of these rooms named "animate" and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template" . finetune: select "On" . Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 沒畫面的話可能還是會不太清楚呢，沒關係，我直接把操作步驟拍成教學影片了，只要照著這些步驟做，連從來都沒接觸過AI的人，都能成功產出一個成品： 操作流程影片（操作手順動画） 為什麼會紅到日本？ 這個不斷被二創的meme影片其實來自美國歌手 Lil Yachty 在演唱會的一段影片： Lil Yachty with the HARDEST walk out EVER 。 在「Viggle AI」出現之後，就從歐美紅到日本去了。大多人使用的素材都是動漫人物、Vtuber、親友或自己。 Viggle AI 的官網有提供 許多 motion_p
READ THIS »

運用資料層 dataLayer.push 建立 GTM 自訂事件

作者： -
圖片
GTM（Google Tag Manager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。但現實往往沒那麼簡單，通常都會遇到一堆 ajax、history 或 cache 要處理，這時候就要請到自訂事件出馬了。 若只用 GA，沒有使用 GTM 的話，自訂事件要這樣寫： gtag('event', ..., { 'event_category' : ..., 'event_label' : ... }); 那如果用 GTM 的話該如何操作呢？ 將資料 push 進 dataLayer 首先我們要知道什麼是 dataLayer：一個 GTM 內部的全域變數，它能動態存取網頁的使用者行為數據。 更進一步探索它的   JSON   架構，可以在網頁上使用開發者工具(F12)的 console 欄，輸入 dataLayer，其實跟它的名字一樣就是層層分明的資料層 (Data Layer)。 在 F12 中查看 dataLayer 你會發現 GTM 測試欄位左邊有幾個事件，dataLayer 裡面就有幾個 object。 再把 object 點開（這裡以 Window Loaded 為例），會有 event 和 GTM 給的事件 id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。 因此，我們可以依樣畫葫蘆用 dataLayer.push 自己寫一段觸發條件把資料送進 dataLayer ，就可以在 GTM 裡面操作了： 開始設定自訂事件 先宣告 dataLayer，避免發生 undefined error 再設定你要 push 進去的數據 這裡我們用「 nav a 點擊偵測」和 ajax 事件舉例（jQuery）： var dataLayer = window.dataLayer || []; // example 1: detect nav a tag click $('nav a').click(function(){ var $text = $(this).text(); dataLayer.push({ 'event'
READ THIS »