search

HTML tag

接下來的兩個篇幅，會跟開發人員有關。

如果您的夥伴對於 SEO 的基本設定沒有相關經驗，可以藉由接下來的文章學習與設定。

hashtag
正確的使用 HTML 標籤

正確的使用 HTML 標籤，有助於搜尋引擎使用機器查看您的網頁時，了解您的網站結構、網站目的、網站連結、網站內容等，有助於您的網站評分。

circle-info

正確的使用 HTML 標籤，對於無障礙的環境也是一種幫助，近年來各國皆在提倡，搜尋引擎也會將無障礙列為評分項目。

hashtag
標題 <h1> - <h6>

每個網站基本只能使用一個 <h1>，這代表著網頁內容的主旨。

除非使用了像 <article> 這種就是刻意要將網頁內容獨立的部分（也就是在 <article> 內，可以再次使用 <h1>，因為 <article> 的意思就是這個區塊內的部分，可以當成獨立的），否則 <h1> 只能使用一次，且最好配合此網頁的關鍵字一起實作 SEO 優化。

再來，依序使用 <h2> ～ <h6>，每個都可以重複，但就是要按照階層使用，如下範例結構：

<h2>
    <h3>
    <h3>
        <h4>
        <h4>
            <h5>
            <h5>
                <h6>
                <h6>
<h2>
    <h3>

這樣的情況，搜尋引擎會良好的知道這個網站的重點在哪。對於無障礙來說，也方便在網頁內容間跳躍。

hashtag
圖片、影片、音訊

正確的使用例如 <img>、<audio>、<video>等，有助於搜尋引擎知道這個網站有多媒體資訊。

並且如前一篇所言，在使用者經驗上，多媒體一般並不會自動播放。

另外，影音類可能會讓 SEO 表現的更好。

hashtag
資訊、列表

如果需要資訊，可以使用 <table> 呈現。

如果是要點累，可以使用列舉標籤，例如 <ol>、<ul>。

這些措施都是幫助使用者釐清各資訊的關係，搜尋引擎也會快速理解內容、認為您的內容是整理過的。

hashtag
無障礙

前面有稍微提到如果有做無障礙的部分 SEO 表現會更好，但要介紹整個無障礙篇幅又太大，所以僅列舉常見基本設定，建議您可以多多暸解無障礙這個領域，白話一點其實就是讓更多的人可以更方便的使用的 UX 層面的事情。

  • <img> 要加入圖片描述在 alt 屬性裡，並且內容是要有意義的。除非此圖片只是裝飾性質，那就可以不填入任何資訊，但注意，還是要把 alt 寫出來，例如：<img src="../deco.jpg" alt="" /> 這個樣子。

  • 網頁的語言設定，例如：<html lang="zh-Hant-TW">，這就是繁體中文-臺灣，越貼近當地主流的語言會更好，當然也可以只使用 zh-Hant ，但這只是表示繁體，沒辦法表示是在臺灣或香港。 另外動態的改變 lang ，提供多國語言會更好。

  • <a> 連結一定要加上 title 屬性描述要前往的連結是什麼，例如：<a href="/" title="前往首頁">首頁</a>，如果連結是連到外部網站，則還要加上 「 另開視窗 」 文字提示和一些屬性，例如： <a href="https://www.google.com/" title="另開視窗前往 Google" target="_blank" rel="noreferrer noopener">，其中 target="_blank" 是另開新分頁，noopener 是避免原始網站被重新導向，是屬於安全性問題，noreferrer 則是該網站得到的是直接流量(direct)，而不是引薦 (referral)。還有一個是 nofollow ，也就是告訴搜尋引擎本網頁跟要前往的網頁沒有關係，但不太常使用。

hashtag
<head>

這部分是 HTML 設定 SEO 的精華，包含了 <title>、<meta>、<link>、<script>， 這裡面的資訊不會顯示在網頁上，基本就是給機器人看的，簡單舉例如下：

接下來我們一個個來看吧，可以選擇自己想要加的再加入就可以了！（以下皆視為在 HTML5 ）

hashtag
參考連結

Previous生成式引擎優化 GEONext結構化資料

Last updated

Was this helpful?