建構完善的網站結構與Schema標記:提升網頁效能與SEO優化
網站不僅僅是展示資訊的平台,更是企業與個人展示品牌形象、吸引流量與提供價值的關鍵工具。為了確保網站的優良運作,不僅需要設計吸引人的外觀,也需要關注內部的技術與結構。
本文將探討如何建構一個功能完備的網站,並透過適當的Schema標記來提升網頁效能和SEO優化。
【網站整體】
- 網站要有自動生成的Sitemap XML檔,放置於網域根目錄底下,有助於搜尋引擎更好地索引您的網站頁面。
- 每頁都應包含
<h1>
標題 - 每頁都要有可編輯title的欄位,若該格空白,則預設為:文章標題(h1) | 網站名稱
- 每頁都需有可編輯meta description的欄位,若該格空白,則預設抓取該頁主要內容的前150字
- 網站每頁皆須有固定式標籤,格式參照《附1》
- 網站應有Canonical標籤設定,用於指示首選版本的重複內容,有助於避免SEO問題。
- 網站應有Robots.txt設定,用於控制搜尋引擎爬蟲訪問網站的內容。
- 每個頁面後台最底下都需要有以下2個欄位:
(1)輸入後會出現在"該頁面"原始碼</head>
前一行
(2)輸入後會出現在"該頁面"原始碼<body>
下一行 - 網站後台的「全站設定」需有以下2個欄位:
(1)輸入後會出現在"所有頁面"原始碼</head>
前一行
(2)輸入後會出現在"所有頁面"原始碼<body>
下一行頁面後台欄位,可用於添加例如Google Tag Manager(GTM)和Google Search Console(GSC)等網站流量工具。
- 選單:
(1)選單應該具備<a>
標籤的title屬性
示例:<a href="#" title="選單文字">選單文字</a>
(2)應支援自行新增/刪減選單的功能 - footer:確認日後是否可以修改
- 建立文章列表頁,並將其置於主選單中,方便訪客查閱所有文章
- 如果有表單,使用者填完後可跳轉到另一個獨立的成功送出頁
【單一文章】
- 自訂文章標題(h1)
- 自訂Meta description
- 自訂網址(建議使用英文小寫和中線符號)
網址部分建議使用英文小寫加上中線符號,例:https://www.domain.com.tw/seo-site-structure/
此外,也需考慮以下問題:
- 圖片上傳方式:提供媒體庫功能,確保圖片可以輕鬆上傳,並確保檔名不會變成亂碼。
- 分類管理:是否可以新增、修改分類,並是否能導入相應分類的文章列表。
- 單一文章頁面:是否會自動導入最新文章的側邊欄設計,增加用戶的導覽與互動。
【服務介紹頁面】
- 是否能提供目前網站的樹狀圖架構,以協助用戶更好地了解網站內容結構。
- 是否存在不可編輯的頁面或區塊,並且是否能夠透過FTP下載、修改,再上傳。
【Schema結構定義標記】
Schema最主要是使用Google可以理解的語言,讓他了解網站的資訊與結構,以下是四個最主要會使用的Schema,原始碼在附檔中:
❐麵包屑 Breadcrumb
讓搜尋引擎及使用者理解現在所在網站位置,主要要注意的地方是:不同類型的頁面所在層級不同,需要瞭解原始碼的結構後再做執行:
❐文章頁面
著重在「更新時間」的Schema標記,確保隨著內容的更新而同步調整。
❐服務頁面
相關的Schema標記,以提供更多有價值的資訊給搜尋引擎。
❐問與答FAQ
問與答的「答案」內容可以使用
<strong>、<em>、<a>等標籤,因此出現在此處的原始碼不可以自動被系統吃掉。
《附1:固定式標籤》
<title>文章標題(h1) | 公司名稱</title>
<meta name="description" content="文章描述(自訂)"/>
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="文章網址" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:type" content="article" />
<meta property="og:title" content="文章標題" />
<meta property="og:description" content="文章Description" />
<meta property="og:url" content="文章網址" />
<meta property="og:site_name" content="公司名稱" />
<meta property="og:image" content="文章主視覺圖網址" />
<meta property="og:image:width" content="960" />(主視覺圖寬度)
<meta property="og:image:height" content="640" />(主視覺圖高度)
<meta property="og:image:alt" content="文章標題" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="article:published_time" content="2022-12-09T16:03:00+08:00" />(文章發佈時間,格式如左)
<meta property="article:modified_time" content="2022-12-06T09:35:47+08:00" />(預設為發布日期,之後會有更新日期需求,此行需自動抓最後修改日期)
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="文章標題 | 公司名稱" />
<meta name="twitter:description" content="文章Description" />
<meta name="twitter:image" content="文章主視覺圖網址" />
透過以上的內容可以建構一個功能完備、結構良好且符合SEO的網站,同時運用Schema標記的運用,能更深入地與搜尋引擎溝通,提升網站在搜索結果中的排名與曝光。