HTML - 基本標籤介紹&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 的排版中,會用到區塊或是行內元素來實現。

最常見的便是 divspan

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







Related Posts

MTR04_1002

MTR04_1002

在Gatsby GraphQL中組合出完美資料

在Gatsby GraphQL中組合出完美資料

初探 Probabilistic Models of Cognition

初探 Probabilistic Models of Cognition


Comments