iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
Modern Web

轉職工程師前的技能學習!沒記起來就偷看筆記吧~系列 第 2

HTML裡的meta tag這些你用得到的功能!加強SEO搜尋靠它

  • 分享至 

  • xImage
  •  

上一篇講了語意化能夠增加素搜尋引擎辨識網頁中的區塊,這裡來介紹讓SEO能夠搜尋到你的方法!
meta是元資訊(meta data),HTML< head >內的meta tag就稱為元標籤,也是描述標籤,將網頁內容資訊提供給搜尋引擎,而此內容是不會顯示在網頁上的。

基本meta設定

<!DOCTYPE html>
<html lang="en">       // 英文網頁
<html lang=“zh-Hant”>  // 中文網頁
<head>
  <meta charset="UTF-8">  // character set 通用字元
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  // 設置IE兼容模式
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      // 指定不同瀏覽器如何渲染與縮放頁面的寬高,RWD/mobile web 一定要加
  <title>Home Page</title>  // 設定網頁標題
</head>

更多meta tag設定

・Canonical 標準網址

<link rel="canonical" href="https://example.com">

同一個頁面在網路上時常會有不同的網址呈現,如果不設定標準網址,搜尋引擎可能判斷是兩個相異的網站但重複的內容,會因此排名下降!

・Author / Copyright 作者與版權

<meta name="author" content="Alice CH">
<meta name="copyright" content="Alice CH,  All Rights Reserved">

・Robots 追蹤索引

<meta name="robots" content="index, follow">
  • all 預設 = index, follow
  • noindex 要求不在搜尋結果上顯示此網頁
  • nofollow 要求不追蹤此網頁上的連結
  • noarchive

可以單寫content= "noindex",或是用,隔開 content= "noindex, follow"

・Description 內容描述

<meta name="description" content="網站內容概述">

若內容概述精準呈現網頁內容,能夠增加被搜尋到的機會!
但如果寫得不夠或是沒寫也沒關係,搜尋引擎會根據搜尋字詞改寫description。而不希望搜尋引擎改寫你的description,就必須避免不相關的描述。
https://ithelp.ithome.com.tw/upload/images/20220916/20152137FmfwEV9Itk.png

・Keywords 關鍵字

<meta name="keywords" content="SEO,metatag,html">

曾經是SEO優化最重要的根據!但現在已經沒有在用了QQ,常有人添加過多與網頁不相干的文字,為了提升SEO的排名,所以Google決定不再參考keywords來決定SEO排名了。


上一篇
HTML5的語意化標籤,加速搜尋引擎讀懂你的網頁
下一篇
用HTML與CSS製作出「下拉選單」!
系列文
轉職工程師前的技能學習!沒記起來就偷看筆記吧~7
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言