Ouvrir les balises de graphique dans AEM

Introduction

Les balises Open Graph sont définies par la propriété og: meta et trouvées dans la balise. En termes plus simples, les balises Open Graph contrôlent la façon dont le contenu du site Web apparaît lorsqu’il est partagé. Ces balises représentent le titre, la description et l’image que les plateformes de médias sociaux doivent utiliser lorsque le contenu est partagé.

Pourquoi les balises Open Graph sont-elles importantes ?

1. Meilleure apparence – Les balises OG convertissent les URL des pages en « cartes » accrocheuses lorsqu’elles sont partagées.

2. Informations en un coup d’œil-Ils donneront une brève idée aux téléspectateurs de ce dont parle le contenu.

3. CTR plus élevés- Les aperçus améliorés augmentent considérablement les taux de clics. Par exemple, les publications contenant des images suscitent plus d’engagement.

Quelques exemples de balises OG

1. et:titre — Cette balise indique le titre de la page.

2. et :url – Indique l’URL canonique permanente.

3. et:image — L’URL de l’image liée à la page.

Code pour créer les balises méta og personnalisées dans AEM :

Laissez-moi vous expliquer les étapes. Pour cela, vous devez avoir des connaissances de base sur AEM.

1. Dans cq:dialog de tous les modèles utilisés dans votre projet, créez les champs pour Og:title, Og:image et Og:URL comme indiqué ci-dessous :

2. Dans head.html du composant de page, récupérez la valeur de ces champs comme indiqué ci-dessous :

3. Le modèle ressemble à celui ci-dessous :

4. Le code de Constants.java est le suivant :

5. Le code PathUtils est le suivant :

Après avoir terminé les étapes mentionnées ci-dessus, vous pouvez vérifier en cliquant sur « Afficher la source de la page ».