L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Implémentation de Schema.org dans la FAQ Sitecore Rendu en accordéon / Blogs / Perficient
Comme nous l’avons discuté de Schema.org dans Sitecore et de ses avantages dans mon précédent Blog. Nous explorerons l’implémentation de schema.org sur les composants.
Dans ce blog, je prends un scénario dans lequel j’implémenterai Schema.org sur le composant FAQ Accordion dans Sitecore.
Conditions préalables:
- Sitecore 9.1 et supérieur
- SXA
Pour ce composant, j’ai ajouté un style de pot de peinture pour le composant Accordéon (OOTB). L’ajout de cette classe différenciera le composant Accordéon de la FAQ Accordéon. Cette classe (schéma-accordéon) peut être utilisée pour récupérer les données du composant.
Comment implémenter Schema.org dans un accordéon FAQ Sitecore
1. Créez un style de pot de peinture pour le composant Accordéon (prêt à l’emploi) dans sitecore/content/TenantName/SiteName/Presentation/Styles/Accordéon. J’ai nommé le style Schema Accordion et la valeur (nom de la classe) schéma-accordéon. Un rendu autorisé peut être ajouté pour rendre le style de rendu spécifique.
2. Ajoutez le composant Accordion à n’importe quelle page et créez une source de données.
3. Ajoutez le style (Schema Accordion) que nous avons créé au rendu
4. Créez une variante de rendu du rendu du contenu de la page pour le titre, le titre et le contenu. Ajoutez Scriban à la variante de rendu et ajoutez le code suivant au Scriban :
Pour le titre :
{{ if (o_pagemode.is_experience_editor_editing) }}
{{ sc_field i_item "Heading" }}
{{ else }}
<div class="field-heading">{{ i_item.Heading.raw }}</div>
{{ end }}
Pour le titre :
{{ if (o_pagemode.is_experience_editor_editing) }}
{{ sc_field i_item "Heading" }}
{{ else }}
<p class="faq-question" itemprop={{i_item.name}}> {{ i_item.Heading.raw }} </p>
{{ end }}
Pour le contenu :
{{ if (o_pagemode.is_experience_editor_editing) }}
{{ sc_field i_item "Content" }}
{{ else }}
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div class="faq-answer" itemprop="text">
{{ i_item.Content.raw }}
</div>
</div>
{{ end }}
5. Ajoutez le code suivant à votre fichier JavaScript afin que le schéma soit ajouté au composant
function insertScript(tagToAdd, tags = null, updateScript, deleteOtherNodes = false) { if (!tagToAdd) return ; var headElement = document.getElementsByTagName(tagToAdd)[0]; if (tags && tags.length > 0) { document.getElementsByTagName(tagToAdd)[0].replaceChild (script mis à jour, balises[0]); si (!deleteOtherNodes) retourne ; pour (soit i = 1; i < tags.length; i++) { headElement.removeChild (tags[i]); } } else { headElement.appendChild(updatedScript); } } const accordéon = document.querySelector(".accordion.schema-accordion"); var accordéonItems = accordéon.querySelectorAll("ul li"); var listeaccordéon = []; accordéonItems && accordéonItems.forEach((items, index) => { var question = accordéonItems[index].querySelector(".toggle-header .field-heading").innerText; var réponse = accordéonItems[index].querySelector(".toggle-content .field-content").innerText; accordéonList.push({ "@@type": "question", "name": question, "acceptedAnswer": { "@@type": "answer", "text": réponse } }); }); var schemaMarkup = "[{ \"@@context\": \"https://schema.org/\", \"@@type\": \"FAQPage\", \"mainEntity\":" + JSON.stringify(accordionList) + "}]"; var prevTagss = document.getElementsByTagName('head')[0].querySelectorAll("script[type="application/ld+json"");
prevTagss = Array.from(prevTagss);
prevTagss = prevTagss.filter((p) => p.innerHTML.indexOf("@@graph") > -1);
var newScriptt = document.createElement('script');
newScriptt.type="application/ld+json";
newScriptt.innerHTML = schemaMarkup;
insertScript('head', prevTags, newScriptt, true);Note: Make sure to use the class names you have used in your component.
6. The schema should appear in the <head> tag of the page and should look like this
By performing the above steps, Schema.org can be implemented in a Sitecore FAQ Accordion Component.
As this FAQ accordion is properly marked, this may be eligible to have a rich result on Search and an action on google assistant, which can help your site reach the right users.
I will be exploring more about schema.org and PowerShell scripts by which we can perform tedious tasks effortlessly. Stay tuned!
Source link