痞客邦新聞台

撰文 / PIXNET 資深公關主任 蔡佩庭

審稿 / PIXNET 產品發展部、城邦集團 SEO 工程師 李佳容

想提升部落格文章的搜尋排名，規劃良好的文章架構並設定文章目錄，是部落客必學的 SEO 優化技巧之一，如果您是新手創作者，建議可以依照以下流程產出文章。關於如何設定文章主題，您可以參考痞客邦先前的教學文章，本篇教學主要說明如何使用痞客邦文章編輯器設定文章目錄，以及設定文章目錄的優點、Q&A。

部落格文章產出流程：

1. 設定文章主題
2. 規劃文章架構與段落標題
3. 撰寫文章內容
4. 使用部落格後台設定格式（包含段落標題、文章目錄等）

設定文章目錄與標題的優點

如果將「寫文章」比喻為「蓋房子」，「文章架構」就像是房子的鋼筋骨架，蓋房子之前需要先設計一份藍圖，再依照藍圖施工，才能蓋出一棟完整、堅固的房子。對於部落客來說，事先規劃文章架構有助於寫文章的時候思緒更清楚，確保文章內容不會偏離主題，或者漏掉重要的資訊。

除此之外，設定文章目錄和標題的優點還有：有助於搜尋引擎更快速且明確的知道文章內容的重點與架構、增強內容的 SEO 表現、讓文章更容易閱讀、幫助讀者快速找到他們最需要的資訊⋯⋯等。尤其是文章字數較多、篇幅較長時，建議務必設定段落標題以及文章目錄。

H2、H3 標題是什麼？

為了讓 Google 搜尋引擎爬蟲理解文章的架構，以及各段落的重要性與排序，我們會使用 H 標籤去標記一篇文章的標題（或稱為 H1），以及副標題（或稱為段落標題、H2）、小標題（或稱為 H3），這些文章標題、副標題、小標題建議放入主要關鍵字，這有助於提升關鍵字的SEO成效。

您在痞客邦發布文章時，務必在「文章標題」欄位輸入文章標題，文章標題應該簡單扼要，字數建議控制在 25~30 字，並且適當放入相關字詞。

一篇部落格文章通常會有多個段落，並以副標題（或稱為段落標題、H2）歸納段落的重點。一篇文章通常會有多個 H2，舉例來說，一篇鼎泰豐美食介紹文章可能會區分成以下幾個 H2：

H2：鼎泰豐菜單、推薦料理

H2：鼎泰豐素食料理有哪些

H2：鼎泰豐隱藏吃法

H2：鼎泰豐線上訂位

H2：鼎泰豐官網及分店

在 H2 之下，還可以再區分出小標題（或稱為 H3），舉例來說，在眾多鼎泰豐推薦料理中，您特別想介紹小籠包、紅油抄手、核桃鬆糕這 3 項，那麼文章整體的 H2、H3 的規劃如下：

H2：鼎泰豐菜單、推薦料理

H3：鼎泰豐小籠包

H3：鼎泰豐紅油抄手

H3：核桃鬆糕

H2：鼎泰豐素食料理有哪些

H2：鼎泰豐隱藏吃法

H2：鼎泰豐線上訂位

H2：鼎泰豐官網及分店

如果您的部落格文章長度比較短、架構比較簡單，也可以只設定 H2，不用設定 H3。

設定痞客邦文章目錄步驟教學

規劃好 H2、H3 之後，就可以開始撰寫文章內文，並且使用痞客邦部落格後台的文章編輯器進行設定，以及新增文章目錄，步驟如下：

【步驟1】將段落標題（H2），或者小標題（H3）的文字選取起來。

【步驟2】套用「段落格式」中的「標題2」或者「標題3」。

【步驟3】點選「原始碼」按鈕，切換為原始碼模式，並且在想要放置目錄的地方，輸入以下語法

<div class="pix_toc"></div>

【步驟4】儲存文章即可。

以上為痞客邦新版文章編輯器的操作步驟，舊版文章目錄的設定方式，請參考以下簡報說明。

文章目錄設定Q&A

Q：新增痞客邦文章目錄之後，新增或刪除 H2、H3 標題，文章目錄會自動更新嗎？

Ａ：是的，文章目錄會自動更新。新增文章目錄後，如果調整 H2、H3 標題，無需修改文章目錄的原始碼，只要儲存文章，文章目錄就會自動更新。

Ｑ：新增痞客邦文章目錄之後，如何刪除？

Ａ：切換為原始碼模式後，你會看到以 <!-- pix_toc_start --> 開頭，一直到以 <!-- pix_toc_end --> 結尾的區塊，刪除這區塊的內容即可。

Q：痞客邦文章編輯器的「錨點」按鈕的功能，以及使用<h2></h2>、<h3></h3>設定 H2、H3 標籤，兩者有什麼不同？

A：錨點在網頁是用來連結到其他頁面的文字、圖片，當用戶點擊錨點時，可以跳轉到指定的頁面區塊或其他頁面的某一區塊。錨點也可以幫助搜尋引擎更容易理解網頁的結構，有助於 SEO。錨點並無層級的分別，如果文章結構有較多層級，建議仍需要設定 H2、H3 標籤。

Q：如何調整文章目錄的字體大小？

A：您可以透過部落格 CSS 語法統一調整每篇文章目錄的字體大小。路徑為「部落格後台」＞「樣式管理」＞「部落格CSS語法」，請將以下語法貼在 CSS 原始碼的第一行（如下圖所示），再按「儲存」。

#pix_toc_blcok ul li a{font-size: 20px;}

Q：如何自行調整點擊目錄後的跳轉位置？

A：您可以透過部落格 CSS 語法統一調整每篇文章目錄點擊後跳轉的位置。路徑為「部落格後台」＞「樣式管理」＞「部落格CSS原始碼」，請將以下語法貼在CSS 原始碼的第一行（請參考上圖），再按「儲存」。語法中的「3rem」也可以依照需求調整為「4rem」或者「5rem」，以此類推。

:root {scroll-padding-top: 3rem;}