Cara Menambahkan Skema FAQ Otomatis + Blok Gaya Akordeon di Blogger

Apakah Anda ingin menampilkan bagian FAQ di blog Blogger Anda dan mencari Blok bergaya Accordion, maka Anda datang ke tempat yang tepat.

Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat Menambahkan bagian FAQ Accordion ke situs Blogger Anda dan Menghasilkan skema FAQ secara otomatis.

Tapi, sebelum itu mari kita pahami dulu apa itu skema FAQ?

Skema FAQ mengacu pada jenis markup data terstruktur tertentu yang dapat ditambahkan ke HTML situs web untuk memberikan informasi kepada mesin telusur tentang pertanyaan umum (FAQ) dan jawaban terkait.

Skema FAQ seperti alat khusus untuk situs web. Ini membantu mesin pencari memahami konten pada halaman dengan lebih efektif, memungkinkan mereka menampilkan cuplikan kaya atau cuplikan unggulan di hasil pencarian.

Misalnya , jika situs Anda membahas tentang dinosaurus dan seseorang bertanya kepada Google, “ Apa yang dimakan T-Rex? ” Skema FAQ dapat membuat jawaban tersebut muncul tepat di hasil pencarian! Ini seperti cara yang keren untuk berbagi informasi.

Bagaimana Cara Menambahkan Bagian FAQ Accordion di Blogger?

Untuk menambahkan bagian FAQ Accordion ke situs Blogger Anda, Pertama buka salah satu postingan blog Anda dalam mode tampilan HTML.

Sekarang gunakan kode di bawah ini dan ganti pertanyaan dan jawaban di atasnya.

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

Sekarang simpan halaman tersebut dan bagian FAQ akordeon akan ditambahkan ke situs web Blogger.

Sekarang jika Anda ingin menambahkan skema FAQ untuk ini, Anda dapat menggunakan kode tepat di bawah kode di atas.

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

Skrip ini secara otomatis akan menghasilkan skema FAQ berdasarkan Tanya Jawab yang ditambahkan di bagian FAQ.

Anda tidak perlu membuat skema FAQ secara manual di website Blogger. Skrip ini akan melakukan keajaiban secara otomatis.

Jadi, jika Anda membuat perubahan atau menambahkan lebih banyak pertanyaan, Anda tidak perlu membuat skema FAQ lagi menggunakan alat Online apa pun.

Jika Anda merasa artikel ini bermanfaat, bagikanlah di media sosial dan bantu orang lain mengetahui tentang ini. Jika Anda ragu mengenai hal ini, beri tahu saya di bagian komentar.