วิธีเพิ่ม Schema อัตโนมัติ + Accordion Style Block ใน Blogger

คุณต้องการแสดงส่วนคำถามที่พบบ่อยในบล็อก Blogger ของคุณและกำลังมองหาบล็อกสไตล์หีบเพลงใช่หรือไม่ แสดงว่าคุณมาถูกที่แล้ว

ในบทความนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถ เพิ่มส่วนคำถามที่พบบ่อยของ Accordion ลงในเว็บไซต์ Blogger ของคุณ และสร้างสคีมาคำถามที่พบบ่อยโดยอัตโนมัติได้อย่างไร

แต่ก่อนหน้านั้นมาทำความเข้าใจกันก่อน ว่า FAQ schema คืออะไร?

สคีมาคำถามที่พบบ่อยหมายถึงมาร์กอัปข้อมูลที่มีโครงสร้างประเภทเฉพาะที่สามารถเพิ่มลงใน HTML ของเว็บไซต์ได้ เพื่อให้เครื่องมือค้นหาได้รับข้อมูลเกี่ยวกับ คำถามที่พบบ่อย (FAQ) และคำตอบที่เกี่ยวข้อง

FAQ Schema เปรียบเสมือนเครื่องมือพิเศษสำหรับเว็บไซต์ ช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาบนหน้าเว็บได้อย่างมีประสิทธิภาพมากขึ้น ช่วยให้เครื่องมือค้นหาสามารถแสดงตัวอย่างข้อมูลที่สมบูรณ์หรือตัวอย่างข้อมูลแนะนำในผลการค้นหาได้

ตัวอย่างเช่น หากเว็บไซต์ของคุณเกี่ยวกับไดโนเสาร์ และมีคนถาม Google ว่า “ ทีเร็กซ์กินอะไร? ” FAQ Schema สามารถทำให้คำตอบนั้นปรากฏขึ้นในผลการค้นหาได้ทันที! มันเหมือนกับเป็นวิธีที่ดีในการแบ่งปันข้อมูล

จะเพิ่มส่วนคำถามที่พบบ่อยของ Accordion ใน Blogger ได้อย่างไร

หากต้องการเพิ่ม ส่วนคำถามที่พบบ่อยของ Accordion ลงในเว็บไซต์ 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 ด้วยตนเอง สคริปต์นี้จะทำเวทย์มนตร์โดยอัตโนมัติ

ดังนั้น หากคุณกำลังทำการเปลี่ยนแปลงหรือเพิ่มคำถาม คุณไม่จำเป็นต้องสร้างสคีมาคำถามที่พบบ่อยอีกครั้งโดยใช้เครื่องมือออนไลน์ใดๆ

หากคุณพบว่าบทความนี้มีประโยชน์ โปรดแชร์บนโซเชียลมีเดียและช่วยให้ผู้อื่นทราบเกี่ยวกับเรื่องนี้ หากคุณมีข้อสงสัยเกี่ยวกับเรื่องนี้ โปรดแจ้งให้เราทราบในส่วนความคิดเห็น