Blogger에 자동 FAQ 스키마 + 아코디언 스타일 블록을 추가하는 방법

Blogger 블로그에 FAQ 섹션을 표시하고 아코디언 스타일 블록을 찾고 싶으시다면 올바른 위치에 오셨습니다.

이 기사에서는 Blogger 웹사이트에 Accordion FAQ 섹션을 추가하고 FAQ 스키마를 자동으로 생성하는 방법을 보여 드리겠습니다.

하지만 그 전에 FAQ 스키마가 무엇인지 빠르게 이해해 볼까요?

FAQ 스키마는 검색 엔진에 자주 묻는 질문 (FAQ) 및 해당 답변에 대한 정보를 제공하기 위해 웹 사이트의 HTML에 추가할 수 있는 특정 유형의 구조화된 데이터 마크업을 나타냅니다.

FAQ 스키마는 웹사이트를 위한 특별한 도구와 같습니다. 이는 검색 엔진이 페이지의 콘텐츠를 보다 효과적으로 이해하는 데 도움이 되며 검색 결과에 리치 스니펫이나 추천 스니펫을 표시할 수 있습니다.

예를 들어 , 귀하의 웹사이트가 공룡에 관한 것인데 누군가 Google에 ' T-Rex는 무엇을 먹었나요?' 라고 묻는다면 ” FAQ 스키마를 사용하면 해당 답변이 검색 결과에 바로 표시될 수 있습니다! 정보를 공유하는 멋진 방법 같습니다.

Blogger에 아코디언 FAQ 섹션을 추가하는 방법은 무엇입니까?

Blogger 웹사이트에 Accordion FAQ 섹션을 추가하려면 먼저 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>

이제 페이지를 저장하면 아코디언 FAQ 섹션이 Blogger 웹사이트에 추가됩니다.

이제 이에 대한 FAQ 스키마를 추가하려면 위 코드 바로 아래에 있는 코드를 사용할 수 있습니다.

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

이 스크립트는 FAQ 섹션에 추가된 질문과 답변을 기반으로 FAQ 스키마를 자동으로 생성합니다.

Blogger 웹사이트에서 FAQ 스키마를 수동으로 만들 필요가 없습니다. 이 스크립트는 자동으로 마법을 수행합니다.

따라서 변경하거나 질문을 추가하는 경우 온라인 도구를 사용하여 FAQ 스키마를 다시 생성할 필요가 없습니다.

이 기사가 도움이 되었다면 소셜 미디어에 공유하고 다른 사람들이 이에 대해 알 수 있도록 도와주세요. 이에 대해 의심스러운 점이 있으면 댓글 섹션에 알려주십시오.