如何在 Blogger 中添加自动常见问题解答架构 + 手风琴样式块

已发表: 2023-12-25

您是否想在您的 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 网站上手动创建常见问题解答架构。 这个脚本会自动发挥魔法。

Youtube 视频

因此,如果您要进行任何更改或添加更多问题,则无需使用任何在线工具再次生成常见问题解答架构。

如果您发现本文有帮助,请在社交媒体上分享并帮助其他人了解这一点。 如果您对此有任何疑问,请在评论部分告诉我。