Blogger'da Otomatik SSS Şeması + Akordeon Stil Bloğu Nasıl Eklenir?

Blogger blogunuzda bir SSS bölümü görüntülemek ve Akordeon tarzı bir Blok mu arıyorsunuz, o zaman doğru yere geldiniz.

Bu yazıda size Blogger web sitenize Akordeon SSS bölümünü nasıl ekleyebileceğinizi ve SSS şemasını otomatik olarak nasıl oluşturabileceğinizi göstereceğim.

Ancak bundan önce SSS şemasının ne olduğunu hızlıca anlayalım.

SSS şeması, arama motorlarına sık sorulan sorular (SSS) ve bunlara karşılık gelen yanıtlar hakkında bilgi sağlamak için bir web sitesinin HTML'sine eklenebilecek belirli bir tür yapılandırılmış veri işaretlemesini ifade eder.

SSS Şeması web siteleri için özel bir araç gibidir. Arama motorlarının bir sayfadaki içeriği daha etkili bir şekilde anlamalarına yardımcı olarak, arama sonuçlarında zengin snippet'ler veya öne çıkan snippet'ler görüntülemelerine olanak tanır.

Örneğin , web siteniz dinozorlarla ilgiliyse ve birisi Google'a " T-Rex ne yedi?" diye sorarsa. ” SSS Şeması bu cevabın doğrudan arama sonuçlarında görünmesini sağlayabilir! Bilgi paylaşmanın harika bir yolu gibi.

Blogger'da Akordeon SSS Bölümü Nasıl Eklenir?

Blogger web sitenize Akordeon SSS bölümü eklemek için, Öncelikle blog yazılarınızdan birini HTML görünüm modunda açın.

Şimdi aşağıdaki kodu kullanın ve soruyu ve cevabını değiştirin.

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

Şimdi sayfayı kaydedin; akordeon SSS bölümü Blogger web sitesine eklenecektir.

Şimdi bunun için FAQ şemasını eklemek isterseniz yukarıdaki kodun hemen altındaki kodu kullanabilirsiniz.

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

Bu komut dosyası, SSS bölümüne eklenen Soru ve cevaba göre SSS şemasını otomatik olarak oluşturacaktır.

Blogger web sitesinde manuel olarak SSS şeması oluşturmanıza gerek yoktur. Bu betik sihri otomatik olarak yapacak.

Dolayısıyla herhangi bir değişiklik yapıyorsanız veya daha fazla soru ekliyorsanız herhangi bir Çevrimiçi aracı kullanarak tekrar SSS şeması oluşturmanıza gerek yoktur.

Bu makaleyi yararlı bulduysanız, sosyal medyada paylaşın ve başkalarının da bundan haberdar olmasına yardımcı olun. Bu konuda herhangi bir şüpheniz varsa, yorum bölümünde bana bildirin.