Blogger に自動 FAQ スキーマ + アコーディオン スタイル ブロックを追加する方法

Blogger ブログに FAQ セクションを表示したいと考えていて、アコーディオン スタイルのブロックを探しているなら、ここが正しい場所です。

この記事では、 Accordion FAQ セクションを Blogger Web サイトに追加し、FAQ スキーマを自動的に生成する方法を説明します。

その前に、 FAQ スキーマとは何なのかを簡単に理解しましょう。

FAQ スキーマは、Web サイトの HTML に追加できる特定のタイプの構造化データ マークアップを指し、よくある質問(FAQ) とそれに対応する回答に関する情報を検索エンジンに提供します。

FAQ スキーマは、Web サイト用の特別なツールのようなものです。 これにより、検索エンジンがページ上のコンテンツをより効果的に理解できるようになり、検索結果にリッチ スニペットや強調スニペットを表示できるようになります。

たとえば、あなたの Web サイトが恐竜に関するもので、誰かが Google に「ティラノサウルスは何を食べましたか?」と質問したとします。 FAQ Schema を使用すると、その回答が検索結果に直接ポップアップ表示されます。 情報を共有するためのクールな方法のようです。

Blogger に Accordion FAQ セクションを追加するにはどうすればよいですか?

Accordion FAQ セクションをBlogger Web サイトに追加するには、まずブログ投稿の 1 つを 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 Web サイトに追加されます。

これに 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 Web サイトで FAQ スキーマを手動で作成する必要はありません。 このスクリプトは自動的に魔法を実行します。

したがって、変更を加えたり、質問を追加したりする場合、オンライン ツールを使用して FAQ スキーマを再度生成する必要はありません。

この記事が役に立ったと思われた場合は、ソーシャル メディアで共有し、他の人がこのことを知ってもらえるように支援してください。 これに関して疑問がある場合は、コメント欄でお知らせください。