Jak dodać automatyczny schemat często zadawanych pytań + blok stylu harmonijkowego w Bloggerze

Czy chcesz wyświetlić sekcję FAQ na swoim blogu Bloggera i szukasz bloku w stylu akordeonu, to trafiłeś we właściwe miejsce.

W tym artykule pokażę, jak dodać sekcję FAQ dotyczącą akordeonu do swojej witryny Bloggera i automatycznie wygenerować schemat często zadawanych pytań.

Ale zanim to nastąpi, przyjrzyjmy się szybko , czym jest schemat często zadawanych pytań?

Schemat często zadawanych pytań odnosi się do określonego typu znaczników danych strukturalnych, które można dodać do kodu HTML witryny internetowej, aby zapewnić wyszukiwarkom informacje o często zadawanych pytaniach (FAQ) i odpowiadających im odpowiedziach.

FAQ Schema jest jak specjalne narzędzie dla stron internetowych. Pomaga wyszukiwarkom lepiej zrozumieć treść strony, umożliwiając im wyświetlanie fragmentów rozszerzonych lub fragmentów wyróżnionych w wynikach wyszukiwania.

Na przykład , jeśli Twoja witryna jest poświęcona dinozaurom i ktoś pyta Google: „ Co zjadł T-Rex? Schemat FAQ może sprawić, że odpowiedź pojawi się bezpośrednio w wynikach wyszukiwania! To fajny sposób na dzielenie się informacjami.

Jak dodać sekcję FAQ na temat akordeonu w Bloggerze?

Aby dodać sekcję FAQ dotyczącą akordeonu do swojej witryny Bloggera, najpierw otwórz jeden ze swoich postów na blogu w trybie widoku HTML.

Teraz użyj poniższego kodu i zastąp na nim pytanie i odpowiedź.

 <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>

Teraz zapisz stronę, a sekcja FAQ dotycząca akordeonu zostanie dodana do witryny Bloggera.

Teraz, jeśli chcesz dodać do tego schemat FAQ, możesz użyć kodu tuż pod powyższym kodem.

 <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>

Skrypt ten automatycznie wygeneruje schemat FAQ na podstawie pytania i odpowiedzi dodanych w sekcji FAQ.

Nie musisz ręcznie tworzyć schematu często zadawanych pytań w witrynie Bloggera. Ten skrypt wykona magię automatycznie.

Jeśli więc wprowadzasz jakieś zmiany lub dodajesz więcej pytań, nie musisz ponownie generować schematu FAQ za pomocą żadnego narzędzia online.

Jeśli uważasz, że ten artykuł był pomocny, udostępnij go w mediach społecznościowych i pomóż innym dowiedzieć się o tym. Jeśli masz co do tego jakiekolwiek wątpliwości, daj znać w sekcji komentarzy.