將 h1~h6 標籤使用圖片，但同時保有 SEO 好結構的方法

2023-08-20 16:38:08

如果你想將`h1`到`h6`標籤以圖片呈現，但同時又希望保持良好的SEO效果，你可以考慮以下方法：

1. 使用CSS背景圖片：將`h1`到`h6`標籤的文本隱藏，然後使用CSS的`background-image`屬性添加背景圖片。同時，使用`alt`屬性為每個標籤提供相關的描述性文本，以提高可訪問性和SEO。

2. 使用隱藏文字：使用CSS將文字隱藏，但保留屏幕閱讀器和搜尋引擎可以訪問到的文本。這樣可以確保你的內容對於無法查看圖片的用戶和搜索引擎依然可見。

3. 使用SVG：使用可縮放向量圖像（SVG）作為圖片，這樣可以確保圖片在不同大小的屏幕上都保持良好的清晰度，同時也可以在SVG內部包含文字，有助於SEO。

無論你選擇哪種方法，確保為每個圖片提供適當的`alt`屬性，以便於搜索引擎理解圖片的內容。同時，確保你的網站的其他SEO方面也得到了妥善處理，例如良好的內容、適當的關鍵字使用等。

Diff Checker：快速比對文字/程式碼差異的線上工具 AI Toolboard：簡潔的 AI 工具目錄

你可能也會喜歡的

HTML5 新的 input 屬性

[SEO] 注意瀏覽器相容性

[Chrome 擴充功能] Checkbot- 一鍵幫你檢查網站的 SEO、速度及安全性

HTML Cheat Sheet- 收錄 HTML、CSS 以及 javascript 相關的功能摘要以及簡單的產生器

Loyae：為 CMS 的 SEO 提供整合的平台服務

Ahrefs：專業的搜尋引擎工具與優化助手

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。