痞客邦文章目錄設定｜新版 PIXNET 錨點目錄完整攻略，提升 SEO 與閱讀體驗

最近使用痞客邦 PIXNET 寫文章的朋友，應該會發現新版後台和以前有很多的差異。其中大家常用的「文章目錄」功能，在新版編輯器中已經不像以前那麼容易設定，你可能會遇到：

不知道如何建立文章目錄
點擊目錄無法跳轉
不確定新版是否還能設定錨點
擔心影響 SEO 排名

新版痞客邦 PIXNET 後台改版之後，文章目錄設定方式跟以前不同，而目錄設定對 SEO 和讀者閱讀體驗很有幫助，如果你經常撰寫旅遊攻略、美食懶人包、教學文章或長篇內容，建議每篇文章都加入目錄功能哦！。

其實新版痞客邦仍然可以建立文章目錄，只是方式與舊版不同。這篇文章將分享我目前實際使用的設定方法，透過 HTML 錨點連結建立目錄，不但操作簡單，也能提升讀者閱讀體驗，讓 Google 更容易理解文章架構。

「文章目錄」說明
- 「文章目錄」是什麼？
- 使用文章目錄的好處
痞客邦更新後台文章目錄設定步驟
PIXNET 文章目錄模板
PIXNET 新版文章目錄設定常見問題
結語

「文章目錄」說明

「文章目錄」是什麼？

文章目錄就是在文章開頭建立一份內容索引。

讀者可以直接點擊目錄中的標題，快速跳轉到想閱讀的段落。例如：

文章目錄

景點介紹
交通方式
門票資訊
美食推薦
行程安排

當讀者點選「交通方式」時，就會直接跳到該段落。

使用文章目錄的好處

提升閱讀體驗
長篇文章更容易閱讀
降低讀者離開率
增加停留時間
Google 更容易理解文章結構
有助於 SEO 優化

像是寫旅遊攻略、美食懶人包、景點整理、教學文章、都很適合。

痞客邦更新後台文章目錄設定步驟

新版痞客邦編輯器目前沒有提供自動生成目錄的功能，目前只能暫時用手動來設定，期待痞客邦新版後台未來增加功能，或許有更簡易的方式。

手動目錄的優點，即使未來平台持續改版，這種方式仍然具有高度相容性。

設定方式穩定
不容易跑版
手機版顯示正常
SEO 效果較佳
可自由控制目錄內容
Google 較容易辨識文章架構

Step1：先建立文章標題階層

建立目錄之前，先規劃好文章架構，方便讀者閱讀，也有助於 SEO。

先在文章內設定段落標題 H2、H3、H4

例如：H2 段落標題

新光三越天母店在哪裡
天母新光三越美食街有哪些美食
清爽系丸龜讚岐烏龍麵特色介紹

例如：H3 子標題

熱烏龍麵
冷烏龍麵

Step2：替標題加入錨點 ID

將游標停在段落標題上，切換到 HTML 模式，找到編輯器中的 </> 按鈕。

原本標題可能長這樣：

<h2><strong>新光三越天母店在哪裡</strong></h2>

修改成：

<h2 id="where"><strong>新光三越天母店在哪裡</strong></h2>

<h2 id="food"><strong>天母新光三越美食街有哪些美食</strong></h2>

<h2 id="nodel"><strong>清爽系丸龜讚岐烏龍麵特色介紹</strong></h2>

<h3 id="hot"><strong>熱烏龍麵</strong></h3>

<h3 id="cold"><strong>冷烏龍麵</strong></h3>

錨點命名小技巧，建議使用：

英文字母
數字
不要有空格
簡短好記

例如：

where
food
hotel
day1
day2

Step3：在文章前方建立目錄

將游標停在要插入目錄的位置，切換到 HTML 模式，找到編輯器中的 </> 按鈕。

游標閃爍的地方插入以下程式碼：

<div class="toc">

<p><strong>文章目錄</strong></p>

<ul>
<li><a href="#where">新光三越天母店在哪裡</a></li>
<li><a href="#food">天母新光三越美食街有哪些美食</a></li>
<li><a href="#nodel">清爽系丸龜讚岐烏龍麵特色介紹</a></li>
<li><a href="#hot">熱烏龍麵</a></li>
<li><a href="#cold">冷烏龍麵</a></li>
</ul>

</div>

完成後切回一般編輯模式。

一定要先替標題加入錨點 ID，再至文章前方建立目錄，順序不能顛倒哦！

當讀者點擊：文章目錄下方「新光三越天母店在哪裡」就會直接跳轉到 <h2 id=”where”> 所在位置。

大家可以看看這篇文章設定完成的樣子

新光三越天母店美食街 | 清爽系丸龜讚岐烏龍麵，學生、上班族快速用餐首選https://joyce0221.pixnet.net/blog/posts/901699758797564400

PIXNET 文章目錄模板

提供以下範本，大家可以自行更改後存成自己的模版，未來寫新文章時，只要修改標題文字與 ID 名稱就可以直接套用重複套用了。

<div class="toc">

<p><strong>文章目錄</strong></p>

<ul>
<li><a href="#day1">Day1 行程</a></li>
<li><a href="#day2">Day2 行程</a></li>
<li><a href="#hotel">住宿推薦</a></li>
<li><a href="#food">美食推薦</a></li>
</ul>

</div>

對應段落：

<h2 id="day1">Day1 行程</h2>

<h2 id="day2">Day2 行程</h2>

<h2 id="hotel">住宿推薦</h2>

<h2 id="food">美食推薦</h2>

PIXNET 新版文章目錄設定常見問題

Q1：一定要用 HTML 模式嗎？

因為新版痞客邦目前沒有提供自動目錄功能，所以需要透過 HTML 插入錨點。

Q2：手機版可以正常使用嗎？

只要錨點設定正確，手機與電腦版都能正常跳轉。

Q3：對 SEO 有幫助嗎？

文章結構清楚、標題階層完整、讀者停留時間提升，都有助於搜尋引擎理解內容。

結語

新版 PIXNET 改版後，很多人最不習慣的就是文章目錄功能的改變。

雖然目前沒有內建自動產生目錄，但透過 HTML 錨點設定，依然可以建立完整的文章目錄系統。

我目前也都是使用這種方式來撰寫旅遊、美食與教學文章，方便讀者快速找到需要的資訊。

只要建立一次自己的模板，之後每篇文章都能快速套用，大幅提升文章的專業度與 SEO 效果。

如果這篇教學對你有幫助，歡迎收藏起來，未來寫 PIXNET 文章時直接套用。

如果你也正在經營部落格、自媒體或學習 SEO，歡迎追蹤我的最新文章，我會持續分享旅遊美食與經營自媒體的方法、社群實際操作心得，陪你一起把內容經營得更有效率。

📍追蹤喬伊絲，展開第二人生旅程！

📩 合作邀約請來信 Email：⁠⁠⁠[email protected]

歡迎訂閱喬伊絲《第二人生微旅行》電子報，我會從旅行、自媒體到第二人生的內容思維，把「真的做過才知道的事」分享給你，讓我們彼此陪伴一起前進，越來越好。

Instagram｜ @joyce_lifetour
👉https://www.instagram.com/joyce_lifetour/

Facebook｜勝女喬伊絲的微旅行
👉https://www.facebook.com/cuisine.trip