建構完善的網站結構與Schema標記:提升網頁效能與SEO優化

建構完善的網站結構與Schema標記:提升網頁效能與SEO優化

建構完善的網站結構與Schema標記:提升網頁效能與SEO優化

網紅行銷:部落客 撰文/審稿 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連結

❐服務頁面

相關的Schema標記,以提供更多有價值的資訊給搜尋引擎。

Schema連結

❐問與答FAQ

問與答的「答案」內容可以使用

<strong>、<em>、<a>
等標籤,因此出現在此處的原始碼不可以自動被系統吃掉。

Schema連結

《附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標記的運用,能更深入地與搜尋引擎溝通,提升網站在搜索結果中的排名與曝光。