changed 5 years ago
Linked with GitHub

HTML & SEO

tags: Tag(前端基礎)

參考資料 金魚都能懂 網頁設計入門

參考資料 HTML 基礎語法教學

標籤屬性是甚麼?
HTML標籤因為用途的關係,每個標籤本都可能帶有不同的屬性跟值,作用目的與意義也都不同
🌝 像是圖片標籤會帶有 src 屬性以及 alt 屬性,而超連結則會帶有 href 屬性

語意化是甚麼?
使用HTML標籤來標記網頁內容,讓網頁內容文字具備明確的含意,就是語意化的一個過程

參考資料 HTML語法整理! 3分鐘快速弄懂常用語法!

參考資料 HTML Sematic Tags: Should I Bother With Semantic HTML?

區塊

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

參考資料 HTML語法整理! 3分鐘快速弄懂常用語法!

<header> 網頁標頭,經常包含 logo、標題、導航列 <main> 主要內容 <footer> 網頁結尾,經常包含版權資訊、聯絡方式 <article> 主要文章 <section> 段落 <nav> 導航列 <aside> 跟主要內文沒有太直接關係的側欄

內容

<div> : 分組用 ( block ) <ul> 有序清單 & <ol> 無序清單

圖片

<img> 圖片 <figcaption> 圖片說明文字

文字

<h1> ~ <h6> 網頁標題 <p> 網頁內文 <span> 分組用 <em> 強調文字 <strong> 重要文字 <blockquote> 表示引用自其他內容 <a> 超連結 or 錨點 <pre> 保留格式 <hr> 分隔線 <br> 換行 <time> 日期與時間

嵌入內容

<ifram> 內嵌網頁 <embed> 嵌入一個外部資源 <video> 一段影片檔 <audio> 一段聲音檔 <source> 可填入不同的 <video> or <audio> 類型 <canvas> 透過 JavaScript 實現繪圖功能,甚至是動畫、遊戲 <svg> 繪製一個向量圖

常見的 <head> 內容

參考資料 何謂 HTML ?

* 瀏覽器頁籤的標題和圖示
* 網頁的 Metadata(作者、關鍵字、Open Graph Data…..)
* 連結的檔案(CSS、JS)
<head> <!-- 聲明該頁面的編碼方式 --> <meta charset="UTF-8"> <!-- 加入 RWD --> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> <!-- 在瀏覽器 tab 標籤上的標題 --> <title>網頁標題</title> </head>

title

用於更改網頁頁籤文字

Meta 標籤

敘述網頁的標籤,包含作者、文字編碼、網站說明文字、關鍵字

常用的屬性有: charset 、 name 、 content 、 http-equiv

參考資料 7 個你必須知道的semantic elements

nav扮演的角色是輔助使用者探索網頁

常見的 <body> 標籤

參考資料 HTML & CSS

🔥 參考資料 Emmet縮寫大全

1. 標題字

參考資料 HTML & CSS

<body> <h1>Interneting Is Easy!</h1> <p>First, we need to learn some basic HTML.</p> </body>

2. 段落文字

參考資料 HTML & CSS

<p>段落文字</p>

3. Unordered List 無序清單

參考資料 HTML & CSS

<h2>Lists</h2> <p>This is how you make an unordered list:</p> <ul> <li>Add a "ul" element (it stands for unordered list)</li> <li>Add each item in its own "li" element</li> <li>They don't need to be in any particular order</li> </ul>

4. Ordered List

參考資料 HTML & CSS

<p>This is what an ordered list looks like:</p> <ol> <li>Notice the new "ol" element wrapping everything</li> <li>But, the list item elements are the same</li> <li>Also note how the numbers increment on their own</li> <li>You should be noticing things is this precise order, because this is an ordered list</li> </ol>

5. div 規劃區塊

參考資料 HTML & CSS

idclass 是一種屬性,用來標註塊級元素套用特定的 CSS 樣式
透過 idclass 屬性標注區塊,可讓 CSS 在該區塊進行排版

6. 表格

參考資料 HTML & CSS

<table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> </tbody> </table>
效果如下
Column 1 Column 2 Column 3
Text Text Text

7. strong 強調

參考資料 HTML & CSS

使用強調和斜體的重點並非透過標籤調整樣式
而是用來標示文字賦予它意義讓瀏覽器看懂

<p>Other times you need to <strong>strong</strong>ly emphasize the importance of a word or phrase.</p>

8. em 斜體

參考資料 HTML & CSS

<h2>Inline Elements</h2> <p><em>Sometimes</em>, you need to draw attention to a particular word or phrase.</p>

9. aanchor 建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。

參考資料 MDN

參考資料 鏈接到錨點

<a>標記可以指向具有id屬性的任何元素,可以通過引用頁面和錨名稱將網站從一個頁面鏈接到另一個頁面。
<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
href 屬性
href屬性不要留空,若暫時不需要寫地址,可以寫#
<a href="#" >hello world</a>
<a herf='images.html(檔名路徑)'> :連結到網站的其他頁面 <a herf='https://www.medium.com(網址)'> :連結到另一個網站 <a herf='#123(要連結段落的 id )'> :連結到另一個段落
<p> This example is about links and <a href='images.html'>images</a>. </p>

10. 標籤通常用於放置圖片,可支援 JPG 、PNG 、 GIF 、 SVG

參考資料 HTML & CSS

src 、width 和 alt 是 <img>的屬性
src 是放檔案路徑,width 是調整檔案寬度,alt 是圖片的說明

alt

  • 可以用於友善視障人士了解圖片內容,且當圖片無法出現時也可以說明圖片內容
  • 可以提升網站 SEO
<img src="圖片網址" alt="圖片替代文字" title="圖片標題"> <img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>

11. 換行

參考資料 HTML & CSS

<p>Regards,<br/> The Authors</p>

12. 語意化元素 semantic elements

參考資料 HTML5 Semantic Elements

<header>:網頁的標頭,通常放置網站標題。 <nav>:網頁的選單、導覽。 <main>:網頁的主要內容。 <aside>:網頁的側欄、附加內容。 <article>:一篇文章內容。 <section>:自訂的區塊,例如數篇摘要組成的空間。 <footer>:網頁的頁尾,通常放置聯絡方式、著作權宣告等等。 <mark>:強調一小塊內容。 <time>:顯示日期時間。
<header>
用來表示區塊標題的區塊元素,這個區塊可以是一整個頁面、一個段落或一篇文章
可以把它當成一個放置介紹內容的容器。一個頁面中可以有多個header。
<nav>
導覽列
<section>
文件中的一個專題群組或區塊
像是文章中的章節
不要把section當成div用,這大概是最常見的錯誤用法。
section內裝的應該是有意義且附帶標題的一段內容。
<article>
article跟section的區分是,article有更高的獨立性及完整性。
最簡單的例子就是部落格、報紙與週刊等等。
將任一篇文章拉出來,移至其他網站或是社群媒體時,
可以發現它的原意並不受限於網路載體,因為他本身就具有獨立性。
<aside>
當有些內容與當前的主文無關時,若需要呈現在畫面上,
我們可以使用<aside>元素來包裹這些內容
像是術語定義或相關連結
<footer>
常包含站外聯絡資訊、服務條款、版權說明或使用者隱私權。
footer就是一個區塊的結尾,它並不是sectioning content,
因此它不會有任何section被包在其中
<figure>
figure是一個有完整內容的區塊,他是主要內容的一部分,
而且可以任意移動位置而不影響整體內容的表達。
可以包含影音檔、圖表(可能是canvas或是svg)或是一段code。
🌝 他跟aside的差別在於:
* aside和主內容有關,但不是主內容的一部分
* figure是主內容的一部分,但是他可以任意移動或刪除而不影響主內容的表達。
article, section與div的階級關係

1. article: an independent, self-contained block of related content
2. section: only a block of related content
3. div: a block of content

13. iframe 嵌入網頁

可以設寬度跟高度

(伺服器可以設定防止別人存取網頁)
<iframe src=" " width='' height=' '</iframe>

範例:嵌入google map

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d57840.18805162603!2d121.52986417910155!3d25.03367519999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abb6e9d93249%3A0xd508f7b3aa02d931!2z5Y-w5YyXMTAx6KeA5pmv5Y-w!5e0!3m2!1szh-TW!2stw!4v1594465650664!5m2!1szh-TW!2stw" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

14. form 表單

參考資料 html forms

參考資料 HTML <input> 輸入元素 Input element 簡介

參考資料 慢慢帶你了解Flask - Day4 網頁之間傳值

<form action=”傳送目的地” method=”傳送方式”></form> <form action='' method='get' class='speaker-form'</form>

<div class='form-row'> <label for='email'>Email</label> <input id='email' name='email' type='email' placeholder='joe@example.com'/> </div>

* text inputs (for one or multiple lines) 單行輸入
* radio buttons
* checkboxes
* dropdowns

Text inputs

<!-- A text input --> <input type="text"> <!-- A checkbox --> <input type="checkbox"> <!-- A radio button --> <input type="radio">

範例

<div class="wrapper"> <div class="question">報名類型 <span>*</span></div> <label> <input class="choice_a" type="radio" name="status"> 躺在床上用想像力實作 </label> <br> <input class="choice_b" type="radio" name="status"> 趴在地上滑手機找現成的 </label> </div> <div class="wrapper"> <div class="question">怎麼知道這個活動的? <span>*</span></div> <input class="feedback" type="text" placeholder="您的回答"> </div>

Placeholders

輸入文字時placeholder內的「Enter your name」會消失

<input type="text" placeholder="Enter your name">

Labels 說明文字

<label>Email</label> <input type="email">

Checkboxes

🎄 Checkboxe 常用在可以選擇許多項目的情況
<div class='form-row'> <label class='checkbox-label' for='available'> <input id='available' name='available' type='checkbox' value='is-available'/> <span>I’m actually available the date of the talk</span> </label> </div>

Radio buttons

🎄 Radio Buttons 通常用單選
加上label的使用者體驗會好很多,點字也可以選到要選的東西
<fieldset class='legacy-form-row'> <legend>Type of Talk</legend> <input id='talk-type-1' name='talk-type' type='radio' value='main-stage' /> <label for='talk-type-1' class='radio-label'>Main Stage</label> <input id='talk-type-2' name='talk-type' type='radio' value='workshop' checked /> <label for='talk-type-2' class='radio-label'>Workshop</label> </fieldset>

<div class='form-row'>
  <label for='t-shirt'>T-Shirt Size</label>
  <select id='t-shirt' name='t-shirt'>
    <option value='xs'>Extra Small</option>
    <option value='s'>Small</option>
    <option value='m'>Medium</option>
    <option value='l'>Large</option>
  </select>
</div>

下拉式選單

code範例 下拉式選單

value屬性代表元素的值
<!-- 隱藏欄位 --> <input type="hidden" value="123"> <!-- 文字輸入欄位 --> <input type="text" value="你好"> <!-- 搜尋欄位 --> <input type="search" value="天氣預報"> <!-- 電話輸入欄位 --> <input type="tel" value="0932-333-333"> <!-- URL輸入欄位 --> <input type="url" value="https://www.google.com.tw/"> <!-- Email輸入欄位 --> <input type="email" value="someone@abc.com"> <!-- 密碼輸入欄位 --> <input type="password" value="12345"> <!-- 日期輸入欄位 --> <input type="date" value="2019-08-08"> <!-- 月份輸入欄位 --> <input type="month" value="2019-08"> <!-- 星期輸入欄位 --> <input type="week" value="2019-W32"> <!-- 時間輸入欄位 --> <input type="time" value="09:10:15"> <!-- 日期時間輸入欄位 --> <input type="datetime-local" value="2019-08-08T09:20"> <!-- 數字輸入欄位 --> <input type="number" value="999"> <!-- 範圍輸入滑桿 --> <input type="range" value="90"> <!-- 顏色輸入,色環表 --> <input type="color" value="#ffff00"> <!-- 複選框 --> <input type="checkbox" value="1"> <!-- 選擇按鈕,單選框 --> <input type="radio" value="yellow"> <!-- 提交按鈕 --> <input type="submit" value="這是提交按鈕"> <!-- 圖片按鈕 --> <input type="image" value="" src="https://lh3.googleusercontent.com/K9B0ocaZvhCU3j6PJLyTXngvZRDzAQQI-IeKv7O2IxyG63AHC0agRQp3lO-FFqgW4sdYqnBA9VKoBQowCDW39pjOIk30Q8HtXBNyTwvc6XsaZFUf2VkzmH-pAhZBFxoIEji6ZqTNnHJEPMQSNcjuUMr32AsGQge-_C0TV90tXfny66DCQ4YcNw9wAOIq21zlZftAO1oil213E0vjDwHoJsFILepHZ1dbP6qyJOD5gqCWCa174j_SAmGLA8LI96V1OmKzBveDgrNC4JSkYe3Eb4h0oML4aj9CpgMsDBmAwQBUnnik9aMAZBGz7lcGdv9AHKBWm30QKa7GuNfT2ZmojUpQS6x6SB8DZBECCNOMi-dhTfPx5_6cuSZ4UdKk-1jnyVdNQOWfhwEvBUfj26tXfrzqoQOqdLWBDNBxc82rdCzLu8zDz6W593l20t3BBR9rdXB2sILN-6zOxCAZf6ZjjDFEz2RtVMnx7oXgfV7RUoozEC-UAquC-o2nhoy4MhZ-7hdQf23DyhWrM7D-DkcHC8m8hiE9N4JNn7P_H9IHNaetpEwjv2q4_fyJFvdJYPeLHmVztBsYMv_a30FqE3sz3e3EiVJQ6zMLDvdNtWR_favW0HfumRfQ0y983fnqR2UxCcJ21EWuoSkIUMm90gBz27xZgMofigE=w119-h24-no"> <!-- 重置按鈕 --> <input type="reset" value="這是重置按鈕"> <!-- 普通按鈕 --> <input type="button" value="這是普通按鈕">


15. 如何在網頁顯示標籤??

escape 跳脫
& => &amp; < => &lt; > => &gt;
&lt;div&gt;&lt;/div&gt;

SEO search engine optimization 搜尋引擎優化

參考資料 Open Graph Protocol

  • 主動提供資訊給搜尋引擎
  • 幫助搜尋引擎理解你的網頁,網頁在搜尋結果就可以排名得更好

og: open graph protocol

🌔 為了讓搜尋引擎更了解你的網頁
🌓 og系列通常是給facebook使用

Open Graph Protocol HTML META標籤定義,一般都放置在 HTML 中的 <HEAD> 標籤之下。

META 標籤的格式如下:
<meta property="..." content="..."/>

網頁的 meta 標籤可以替網頁設定屬性的值。
Open Grap Protocol 定義了許多屬性,其中有幾個是必要的屬性,包含:

og:title - 此文件的標題,例如: 「資料視覺化 - 使用 d3.js」 og:type -此文件的類型,例如:「website」 og:image -此文件的縮圖或是代表性的圖片 og:url - 此文件的永久網址

🎄 如果需要確認網頁 Open Graph 的內容,可以使用 Facebook Debugger ;將網址貼入 Debugger 後他便會把抓到的 Open Graph Metadata 與縮圖顯示出來

參考資料 使用 JSON-LD 處理 SEO

JSON-LD

JSON-LD 即是 JSON 格式的結構化資料,簡單來說就是在描述這個網頁的型態及內容
🍄 Google 會去讀取網頁中這樣的結構化資料,並能針對不同的網頁型態做對應的搜尋結果呈現

JSON for Linking Data

目的讓你提供好的格式描述網頁格式化的內容方便機器理解

🎄 robots.txt

給爬蟲看的檔案

參考資料 robots.txt用途與使用範例教學,釐清SEO收錄觀念

🌔 純文字檔
🌓 同常放在根目錄底下
🌖 會跟網頁爬蟲說你可以爬哪些

參考資料 Sitemap是什麼?網站地圖DIY教學與SEO應用

🎄 sitemap.xml

網站地圖,讓搜尋引擎知道他可以爬哪些連結

Select a repo