如何在 Blogger 中新增自動常見問題架構 + 手風琴樣式塊

您是否想在您的 Blogger 部落格中顯示常見問題解答部分並尋找手風琴式塊，那麼您來對地方了。

在本文中，我將向您展示如何將Accordion FAQ 部分新增至您的 Blogger 網站並自動產生 FAQ 架構。

但是，在此之前，讓我們快速了解一下什麼是常見問題模式？

FAQ 架構是指一種特定類型的結構化資料標記，可以添加到網站的 HTML 中，為搜尋引擎提供有關常見問題(FAQ) 及其相應答案的資訊。

FAQ Schema就像是網站的專用工具。 它可以幫助搜尋引擎更有效地理解頁面上的內容，從而允許它們在搜尋結果中顯示豐富的片段或特色片段。

例如，如果您的網站是關於恐龍的，有人問 Google：「霸王龍吃什麼？ ” FAQ Schema 可以使答案直接出現在搜尋結果中！ 這就像共享資訊的一種很酷的方式。

如何在 Blogger 中加入手風琴常見問題解答部分？

若要將Accordion FAQ 部分新增至您的 Blogger 網站，請先以 HTML 視圖模式開啟您的部落格文章。

現在使用下面的程式碼並替換上面的問題和答案。

 <style> .faq-container { max-width: 800px; margin: 24px auto; } details summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; background: #2f3337; color: #fff; font-family:system-ui; font-weight:600; user-select: none; transition: all 120ms ease; } details summary::after { content: ""; display: inline-block; margin-left: 8px; height: 24px; width: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat center center; } details .content img { width: 100%; max-height: 400px; object-fit: cover; margin: 5px 0; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2); } details .content { padding: 10px 16px; line-height: 1.8; margin-top: -10px; color:black; } details { background: #edf2f4; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } details summary::-webkit-details-marker { display: none; } details[open] summary { background: #204ecf; margin-bottom: 10px; } </style> <div class="faq-container"> <details open> <summary>What Is Link Building?</summary> <div class="content"> Link building is the practice of building one-way hyperlinks (also known as “backlinks”) to a website with the goal of improving search engine visibility. </div> </details> <details> <summary>Why Are Links So Important?</summary> <div class="content"> Links are crucial online. They: <ul> <li>Connect Pages: Like pathways between web pages.</li> <li>Boost Google Ranking: More links can make a site show up higher in searches.</li> <li>Build Trust: Links from reputable sites make a page seem more reliable.</li> <li>Bring Traffic: Links can bring people to your site.</li> <li>Simplify Browsing: They make it easy to move around the internet.</li> </ul> </div> </details> <details> <summary>How to Find High-Quality Links?</summary> <div class="content"> To find high-quality links, prioritize creating valuable and relevant content on your website. Content that is informative, engaging, and solves a problem for your audience is more likely to attract organic links. <img src="https://www.abetterlemonadestand.com/wp-content/uploads/2017/06/How-to-Build-Backlinks.jpg" alt=""> Additionally, conduct competitor analysis using tools like Ahrefs or Moz to identify where your competitors are getting links. This insight can guide your link-building strategy and help you target similar high-authority sources. </div> </details> </div>

現在儲存頁面，手風琴常見問題部分將添加到 Blogger 網站。

現在，如果您想為此新增常見問題解答架構，可以使用上述程式碼下方的程式碼。

 <script> function generateFAQSchema() { const faqContainer = document.querySelector('.faq-container'); const detailsElements = faqContainer.querySelectorAll('details'); const faqSchema = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: [], }; detailsElements.forEach((details, index) => { const summary = details.querySelector('summary'); const content = details.querySelector('.content'); const question = summary.textContent.trim(); const answer = content.textContent.trim(); faqSchema.mainEntity.push({ '@type': 'Question', name: question, acceptedAnswer: { '@type': 'Answer', text: answer, }, }); }); const scriptElement = document.createElement('script'); scriptElement.type = 'application/ld+json'; scriptElement.textContent = JSON.stringify(faqSchema); document.head.appendChild(scriptElement); } generateFAQSchema(); </script>

該腳本將根據常見問題解答部分中新增的問題和答案自動產生常見問題解答架構。

您不必在 Blogger 網站上手動建立常見問題解答架構。 這個腳本會自動發揮魔法。

因此，如果您要進行任何更改或添加更多問題，則無需使用任何線上工具再次產生常見問題解答架構。

如果您發現本文有幫助，請在社交媒體上分享並幫助其他人了解這一點。 如果您對此有任何疑問，請在評論部分告訴我。