接下來的兩個篇幅，會跟開發人員有關。
如果您的夥伴對於 SEO 的基本設定沒有相關經驗，可以藉由接下來的文章學習與設定。
正確的使用 HTML 標籤
正確的使用 HTML 標籤，有助於搜尋引擎使用機器查看您的網頁時，了解您的網站結構、網站目的、網站連結、網站內容等，有助於您的網站評分。
正確的使用 HTML 標籤，對於無障礙的環境也是一種幫助，近年來各國皆在提倡，搜尋引擎也會將無障礙列為評分項目。
標題 <h1> - <h6>
每個網站基本只能使用一個 <h1>，這代表著網頁內容的主旨。
除非使用了像 <article> 這種就是刻意要將網頁內容獨立的部分（也就是在 <article> 內，可以再次使用 <h1>，因為 <article> 的意思就是這個區塊內的部分，可以當成獨立的），否則 <h1> 只能使用一次，且最好配合此網頁的關鍵字一起實作 SEO 優化。
再來，依序使用 <h2> ～ <h6>，每個都可以重複，但就是要按照階層使用，如下範例結構：
<h2>
<h3>
<h3>
<h4>
<h4>
<h5>
<h5>
<h6>
<h6>
<h2>
<h3>
這樣的情況，搜尋引擎會良好的知道這個網站的重點在哪。對於無障礙來說，也方便在網頁內容間跳躍。
圖片、影片、音訊
正確的使用例如 <img>、<audio>、<video>等，有助於搜尋引擎知道這個網站有多媒體資訊。
並且如前一篇所言，在使用者經驗上，多媒體一般並不會自動播放。
另外，影音類可能會讓 SEO 表現的更好。
資訊、列表
如果需要資訊，可以使用 <table> 呈現。
如果是要點累，可以使用列舉標籤，例如 <ol>、<ul>。
這些措施都是幫助使用者釐清各資訊的關係，搜尋引擎也會快速理解內容、認為您的內容是整理過的。
無障礙
前面有稍微提到如果有做無障礙的部分 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 ，也就是告訴搜尋引擎本網頁跟要前往的網頁沒有關係，但不太常使用。
<head>
這部分是 HTML 設定 SEO 的精華，包含了 <title>、<meta>、<link>、<script>， 這裡面的資訊不會顯示在網頁上，基本就是給機器人看的，簡單舉例如下：
<html>
<head>
<meta charset="utf-8" />
<title>網頁頁籤標題</title>
</head>
<body>
<!-- 網頁內容 -->
<h1>頁面內容的標題</h1>
</body>
</html>
接下來我們一個個來看吧，可以選擇自己想要加的再加入就可以了！（以下皆視為在 HTML5 ）
<!-- 設定網頁頁籤標題 -->
<title>網頁頁籤標題</title>
<!-- 網頁編碼，通常使用UTF-8 -->
<meta charset="UTF-8">
<!-- 網頁主要的描述 -->
<meta name="description" content="網⾴簡短描述">
<!-- 網頁最主要的關鍵字，大概 4 ~ 6 個差不多，不要太多，使用逗號隔開 -->
<meta name="keywords" content="網⾴關鍵字1,網⾴關鍵字2">
<!-- 網頁作者 -->
<meta name="author" content="作者姓名">
<!-- 編輯器名稱，但通常開發者不會想讓人知道 -->
<meta name="generator" content="編輯器名稱">
<!-- 版權訊息 -->
<meta name="copyright" content="網⾴版權">
<!--
網⾴發佈地區
僅三種值：Global、Local、IU(Internal Use)
-->
<meta name="distribution" content="網⾴發佈地區">
<!--
告訴搜尋引擎不要建立索引(index) 和 不要檢索網頁內的連結
詳細使用方式可參考：
https://www.yesharris.com/seo-basic/meta-robots-and-robots-txt/
-->
<meta name="robots" content="noindex, nofollow"/>
<!-- 告訴搜尋引擎主要網址，請優先顯示 -->
<link rel="canonical" href="https://yourwebsite.com">
<!-- 使用的 CSS -->
<link rel="stylesheet" href="/style.css">
<!-- 設定網頁頁籤圖標 -->
<link rel="icon" href="/favicon.ico">
<!-- 使用的 Javascript -->
<script src="/javascript.js" >
<!--
社群分享顯示：
都沒設定的話，會抓取上述的 <title> 和 description 等資訊，
facebook 可參照：
https://developers.facebook.com/docs/sharing/webmasters?locale=zh_TW
如果想要特別顯示不一樣的，可以做以下設定
-->
<!-- 設定網址 -->
<meta property="og:url" content="" />
<!-- 設定網址 -->
<meta property="og:title" content="" />
<!-- 設定描述 -->
<meta property="og:description" content="" />
<!-- 設定分享顯示圖片的來源位址 -->
<meta property="og:image" content="" />
<!-- 設定媒體類型，預設是 website -->
<meta property="og:type" content="" />
<!-- 設定語言 -->
<meta property="og:locale" content="" />
<!-- 設定網站名稱 -->
<meta property="og:site_name" content="" />
<!-- 設定文章發布時間 -->
<meta property="article:published_time" content="" />
<!-- 設定文章修改時間 -->
<meta property="article:modified_time" content="" />
<!-- 設定 section 名稱 -->
<meta property="article:section" content="" />
<!-- 設定文章的標籤 -->
<meta property="article:tag" content="" />
<!-- 如果需要，設定 Facebook 的 ID -->
<meta property="fb:admins" content="" />
<meta property="fb:app_id" content="" />
<!--
twitter
大致上跟 FB 差不多，只是有一些是 twitter 專屬使用，例如 Card
詳細可參考 https://developer.twitter.com/en/docs/twitter-for-websites
-->
<meta name="twitter:card" content="">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:image:src" content="">
<!--
Favicon
網站在瀏覽器頁籤的識別
製作小技巧
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
-->
<link rel=“shortcut icon" href="XXXX.png">
<link rel="apple-touch-icon" href=“XXXX.png”>
<!--
or apple-touch-icon-precomposed
(2020) 32, 128, 152, 167, 180, 192, 196
-->
<link rel="apple-touch-icon-precomposed" sizes="32x32" href="XXXX.png">
<!--
關於 App 的設定
-->
<!-- 添加到主畫⾯的標題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="標題">
<!-- 是否啟⽤ WebApp 全螢幕模式，刪除蘋果默認的⼯具欄和選單 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 添加智能 App 廣告條（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 設置蘋果⼯具欄顏⾊ -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 忽略⾴⾯中的數字識別為電話，忽略 email 識別 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- iPad （直） 768 x 1004（標準解析度） -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad （直） 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad (橫) 1024x748（標準解析度） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad (橫) 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) -->
<link rel="apple-touch-startup-image" href="/splashscreen-320x480.png"/>
<!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!--
關於 RSS 的設定
-->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
參考連結
Last updated