---
# System prepended metadata

title: HTML & SEO

---

# HTML & SEO


**< pre >**
preformatted text 保留完整格式


**< table >** 表格
**< tr >** table row
**< td >** table cell
**< th >** table header

**< a >**  anchor 錨點

href : 
hypertext reference

**< a	href=“ 網址 ” >**  超連結


target :

**< a	href=“ 網址 ”	target =“ _self ” >**  當下自動跳轉
**< a	href=“ 網址 ”	target =“ _blank ” >**  另開新分頁

當頁面內容快速抵達的錨點使用：
先把要抵達的地方設 id 後，寫成 **< a	href=“ #id ” >**

---


### 語意化元素 semantic elements :

便於搜尋機器人或是視障人士閱讀的標籤

_
```
<header>
<nav>  navigation 導覽
<main> 
<section>
<article>
<aside>
<mark>
<figure>
<time>
<suummary>
<footer>
```

更多資料：

MDN Semantics：https://developer.mozilla.org/en-US/docs/Glossary/Semantics
New Semantic Elements in HTML5：https://www.w3schools.com/html/html5_semantic_elements.asp

---

**iframe 使用別人寫好的網頁**

< iframe src=“ 網址” / >

可以下  X-Frame-Options 防止別人存你的網頁

---

**表單相關標籤**

**< form >** 表單

**< input >** 輸入框

type: 

text 純文字
password  (輸入文字時，瀏覽器會自動遮蔽不顯示)
email  (送出表單時有些瀏覽器會自動驗證，但基本上還是要自己寫驗證)
date (可以預設自動選日期)
radio 
checkbox
submit 送出表單

**< textarea >**

_

簡易範例
```
<form>
	姓名<input type=“text” />
	密碼<input type=“password” />
	信箱<input type=“email” />
	日期<input type=“date” />
	性別<input type=“radio” name=“gender” id=“male” />
    <label for=“male”>男</label>
	<input type=“radio”	name=“gender” id=“female” />
    <label for=“female”>女</label>
	<input type=“submit” value=“按鈕文字” />
    </form>
```


補充 radio 的部分，如果字沒有反應，只能按圓點才能選到的話，會很難選到，所以可以使用 < label >標籤，在 input標籤內加上 id後，在 label 標籤內加上 for 屬性，就可以文字也有反應區。 
checkbox 也適用以上狀況。

*補充更多的 input 屬性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

 
 
 
--- 

 

### SEO 搜尋引擎優化

主動幫助搜尋引擎理解你的網頁


**1.  meta 標籤**

範例

```
<mata name=“keywords” content=“ 餐廳,食物,信義區”>
<mata name=“description” content=“鼎泰豐信義區評價...”> 
```

＊但是聽說Google已經公告宣布此欄位無效

**2. OG  (open graph protocol)** 
通常是拿來給 FB 用的

**3. Json-ld (JSON for Linking Data)** 
通常是 google 在看的
在搜尋結果會撈出一些我們主動提供想被撈出來的資訊，例如評價，分類等等

**4. robots.txt**
給網頁爬蟲看的檔案
通常放在根目錄底下，不想要被爬的可以使用 disallow 阻止

**5. Sitemap.xml** 
給網頁爬蟲看的檔案


可以使用 google search console 看搜尋成效

_

如何在網頁瀏覽器內顯示標籤：Escape

```
& 換成 &amp;
< 換成 &lt;
> 換成 &gt;
```
