HTML - 基本標籤介紹＆SEO

#html #tag #SEO

Posted by ai86109 on 2020-07-28

前言

HTML（HyperText Markup Language），中文是超文本標記語言，最常見的迷思就是以為他是一個程式語言，但其實不是，他只是一個有很多標籤組成的語言。

HTML 起手式

一個 HTML 文件開頭都會有 <!DOCTYPE html>，這個 tag 是要告訴瀏覽器這是一個 HTML5 的網頁，我希望你用這種格式來 render 這個頁面。

<!DOCTYPE html>

而這個文件會由 <html>``<head>``<body>成對包起的內容組成。

<!DOCTYPE html>

<html>
    <head>

    </head>
    <body>

    </body>
</html>

head 裡面通常會有一個 <meta charset="utf-8"> 的 tag，表示此份文件是由 utf-8 的編碼，標籤裡面像是這邊的 charset 稱為屬性（attribute），值是 utf-8。

照剛剛說的標籤成對，應該是寫成 <meta charset="utf-8"></meta> 吧！

但因為裡面沒內容所以可以寫成 <meta charset="utf-8" />，又可以簡化成沒有 / 的。

關於這個更詳細的討論可參考：HTML 5: Is it <br>, <br/>, or <br />?

在 head 裡面常見的還有 title，他是網頁的標題，會顯示在分頁 sheet 的上面。

另外如果要在 HTML 檔案裡面寫註解，就把註解包裹在這裡面 <!-- 註解 -->。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>我是標題</title>
    </head>
    <body>
        <!-- 
        註解在此 
        -->
    </body>
</html>

文字標籤

在最早最早以前，HTML 的功能是拿來顯示文章的，所以會有負責文字的標籤也是很正常的。

<h1> 這邊的 h 代表 heading，是表示標題的意思。h 系列的標籤從 h1~h6，分別代表不同的級別、字體大小。

除了標題之外，也會有內文。

<p> 的 p 代表 paragraph，內文都可以包在裡面。有時候我們為了測試內文會使用 lorem ipsum 來產生假字填充內文。

區塊 / 行內元素

在 HTML 的排版中，會用到區塊或是行內元素來實現。

最常見的便是 div 和 span。

div 是 division 的意思，他是區塊元素；而 span 則是行內元素。

圖片

最基本的用法就是這樣 <img src='圖片位置' />，src 是 source 的意思。

img 除了 src 外還有其他屬性可以使用。

<img title='游標放在圖上顯示的字' alt='當圖片無法顯示時的替代文字' src='img/logo.png'>

列表

很簡單，常見的就三個：
<ul></ul> unordered list
<ol></ol> ordered list
<li></li> list item

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<ol></ol> 同理，就把 ul 換成 ol 即可。

保留格式

假設我現在想在 HTML 文件裡面寫一個 function。

<p>
  function (){
      console.log('123')
  }
</p>

想說應該就會照上面顯示吧。

結果變成 function (){ console.log('123') }，我空格或是換行，都會跟原本不一樣。

有什麼方法可以讓他照原本顯示呢？

用 pre（preformatted text）就 ok 了。

<pre>
    function (){
        console.log('123')
    }
</pre>

那如果我只要換行呢？

用 br（line break），<p>Lorem ipsum dolor sit<br>amet co…

<br /> 後面的 / 可加可不加，寫成 <br> 也沒問題。

表格

<table> 表格 (要做表格時的最外層 tag)
<tr> table row (行)
<td> table cell (列)
<th> table header (第一行，文字會變粗體)

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

帶我飛到遠方

<a> 是 anchor 錨點的意思，他有一個常見的屬性 href（Hypertext REFerence），顯示出來就是一個可以移動到某個位置的超連結，像是下面這樣。

<a href="https://www.google.com" target="_blank">我是連結</a>

這邊的 target 是開啟網頁的方式，預設是 target="_self"，會從本頁直接轉到目標網站；而 target="_blank" 則會另開分頁。

除了可以移動到不同網址外，還有一個用法：

<ul> 
  <li><a href="#title1">標題1</a></li> 
  <li><a href="#title2">標題2</a></li> 
  <li><a href="#title3">標題3</a></li> 
</ul> 
<h1 id="title1">標題一</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius</p> 
<h1 id="title2">標題二</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius </p> 
<h1 id="title3">標題三</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia </p>

就可以在同個網頁做移動。

語義化元素（semantic elements）

這些 tag 的效果跟 div 一樣，但可以讓人一眼看出這裡是幹嘛的，同時對 SEO 也會有幫助。

如 <main> <nav> <footer> 等都是。

詳細可以參考：
Semantics
HTML Semantic Elements

嵌入別的網頁

像是在我現在的工作上，常會碰到一些需要將網頁嵌入到其他網頁的狀況，這時候就可以使用 <iframe></iframe>。

<iframe src="https://tw.news.yahoo.com/video/tim哥夫妻來開箱-全新dyson-pure-cryptomic空氣清淨機到底有多威-103101164.html" width="640" height="360" ></iframe>

但很多網站會擋不信任的網站去做嵌入，像是如果你把 google 嵌入就會失敗。

表單

表單的基本格式是：

<form>
    <input type="text">
</form>

input 的 type 不只有 text，還有很多類別：
text 一般的文字輸入框
password 輸入的東西會變成密碼型態
email 會要求是 email 格式，否則無法送出
date 可以填入年月日
radio 圓點選擇框
checkbox 勾選的選擇框

那假設我現在想要做一個性別的 radio 選擇要怎麼做？

<form>
    <div>
        性別：<input type="radio">男性
        <input type="radio">女性
    </div>
</form>

結果發現的確是出現了我要的樣子了，但是男生女生前面的選項都可以選，變成複選了。

原因是因為我們並沒有讓電腦知道這兩個是同一題的選項。

那如果我要的是單選該怎麼辦？用 name

<form>
    <div>
        性別：<input type="radio" name="gender">男性
        <input type="radio" name="gender">女性
    </div>
</form>

OK，完成單選了！

但現在還有個問題，這個選擇框好小，使用者體驗不是說很好。有沒有辦法我點字，就可以順便選到我要的。

有辦法，但得先把我們要選的字加上 label，而且光加上 label 還不夠，我們還要用 id & for 決定我們的指向。

<form>
    <div>
        性別：
        <input type="radio" name="gender" id="male">
        <label for="male">男性</label>
        <input type="radio" name="gender" id="female">
        <label for="female">女性</label>
    </div>
</form>

按到 for 的字，就會指向 id，checkbox 也可以用同樣的方式實作。

還有另一種做法是：

<form>
    <div>
        性別：
        <label>
            <input type="radio" name="gender" id="male">
            男性
        </label>
        <label>
            <input type="radio" name="gender" id="female">
            女性
        </label>
    </div>
</form>

也可以達成點字就會指向我想選的格子。

最後，表單一定要有送出

<input type=“submit”>

如果要改送出的字，可以再加一個 value 屬性

<input type=“submit” value="送出表單" />

以上是常用的，還有其他更多的 type 可供使用。
The Input (Form Input) element

Escape 跳脫

一般來說我們在 HTML 文件中輸入 <div></div>，在瀏覽器上只會把它當作標籤，並不會顯示。

那我們如果要將它顯示該怎麼做呢？

這時候就要用 Escape：
& 改成 &amp;
< 改成 &lt; （less than）
> 改成 &gt; （greater than）

所以我們將它改成 &lt;div&gt;&lt;/div&gt;，就會顯示 <div></div> 在網頁上了。

搜尋引擎優化（SEO）

Search Engine Optimization（SEO），功能是幫助搜尋引擎去理解你的網頁。

通常我們都會用搜尋引擎去搜尋關鍵字來找到想要的內容，這些靠搜尋引擎而來的流量稱之為原生流量（不是花錢買來的）。

SEO 是個很大的範疇，通常是 SEO team 與工程師間相互配合完成。

以下直接用實際的網頁案例來看比較快：

這些資訊通常藏在header中

最基本的是以 <meta name=""> 出現，像是 description keywords title 等等。

<meta name="description" content="新聞、電子信箱和搜尋功能只是起點。每天發掘更多精彩內容。打造專屬自我的 Yahoo奇摩體驗。”>

但google表示他們並不會去使用keywords，如下：

<meta name="keywords" content="yahoo, yahoo奇摩, yahoo奇摩首頁, yahoo首頁, yahoo搜尋, yahoo 信箱, yahoo 即時通訊, 新聞, 股市, 運動, 娛樂, 拍賣, 購物中心, 超級商城">

上面這些資訊會在 google 搜尋時顯示出來。

另一種則是以 <meta property=“”> 出現。

og (Open Graph Protocol)，分享到社群網站如 fb、line 的時候呈現的資訊: The Open Graph protocol

<meta property="og:title" content="Yahoo奇摩”>
<meta property="og:type" content="website”>
<meta property="og:url" content="[http://tw.yahoo.com](http://tw.yahoo.com/)”>
<meta property="og:description" content="新聞、電子信箱和搜尋功能只是起點。每天發掘更多精彩內容。打造專屬自我的 Yahoo奇摩體驗。”>
<meta property="og:image" content="[https://s.yimg.com/cv/apiv2/social/images/yahoo_default_logo.png](https://s.yimg.com/cv/apiv2/social/images/yahoo_default_logo.png)">
<meta property="og:site_name" content="Yahoo奇摩">

在FB 偵錯工具可以看到上述哪些資訊會被抓取。

另外，我們在看這些原始碼時，還有看到一些用 script 包起來的 JSON 格式。

這個我們稱為 JSON-ld（JSON for Linking Data）。

跟 og 有點像，是以固定的形式讓 google 理解這個網頁有什麼資訊，可以參考這邊有一些提供的格式：JSON for Linking Data

再來是給網頁爬蟲看的資料 robots.txt

通常是放在根目錄底下
例如：https://www.reddit.com/robots.txt

裡面是純文字檔，顯示如下：

Disallow: /login
Disallow: /r/*/user/
Disallow: /gold?
Allow: /partner_api/
Allow: /
Allow: /sitemaps/*.xml
Allow: /posts/*

他會告訴爬蟲什麼可以爬什麼不行，有些還會給 sitemap，告訴你去爬哪些網頁，這樣就不用一個一個去爬了。

Sitemap: https://misc.udn.com/sitemap/gnews/1020
Sitemap: https://misc.udn.com/sitemapxml/global_vision/mapindex.xml

還有像是這種

<link rel="alternate" hreflang="en" href="https://www.tripadvisor.com/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">
<link rel="alternate" hreflang="en-GB" href="https://www.tripadvisor.co.uk/Restaurant_Review-g13808515-d2244808-Reviews-Din_Tai_Fung_101_Branch-Xinyi_District_Taipei.html">

hreflang 後面接語言，告訴搜尋引擎我這個頁面有不同語言，所以如果像是 tripadvisor 等可以評分的網站，給的分數才會集合在一起。

另外還有

<meta property="al:ios:app_name" content="TripAdvisor">
<meta property="al:ios:app_store_id" content="284876795">

使用者在 iOS 上看，就會跳出要不要下載這個 app 的資訊。

Google 也有提供 google search console，可以來看某個網站的流量，觸及關鍵字等等。


#html #tag #SEO

ai86109




Related Posts

每日心得筆記 2020-06-25(四)

每日心得筆記 2020-06-25(四)

 半夏
原子習慣：法則 4 - 讓獎賞令人滿足

原子習慣：法則 4 - 讓獎賞令人滿足

 Sunny
Python - OOP 物件導向

Python - OOP 物件導向

 pei_______

Comments