L'intermédiaire

Les balises OG ? Oui, les balises OpenGraph. Elles sont utiles pour votre référencement et à la rédaction de cet article, j’apprends que c’est en fait Facebook qui est à l’origine de ces balises, créées en 2010. Elles permettent surtout aux moteurs de recherche d’indexer le contenu ainsi détaillé par ces balises dans leur annuaire (titre, lien et description) pour vous rendre ensuite sur votre site. Elles sont donc utiles ! Mais comment les dynamiser en fonction de vos pages et selon la technologie utilisée ? Je fais le point.

Avec PHP

Jusqu’à très peu de temps, je n’utilisais pas vraiment les balises OG complètement, c’est-à-dire pas plus que les quatre balises de base et voilà à quoi elles ressemblent :

<meta property="og:title" content="L'intermédiaire" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://lintermediaire.be" />
<meta property="og:image" content="https://lintermediaire.be/wp-content/uploads/2020/10/merlin.png" />

Cet exemple est valable pour la page d’accueil par exemple. On place ces balises entre les balises <head> et généralement après la balise <title> … </title>. Mais comment dès lors rendre dynamiser les balises og au chargement des différentes pages ?

Une fonction est alors toute indiquée

Les balises OG sont en fait bien plus nombreuses. Vous pouvez y décrire beaucoup plus de détails sur l’objet et le type de média que vous consultez (son, vidéo, image) ou même encore selon le type de réseau social sur lequel vous allez partager votre page. Effectivement, en partageant le lien de votre page sur Linkdein ou Facebook par exemple, ces derniers vont automatiquement se servir pour afficher le titre de la page, sa description et une image d’en-tête que vous avez au préalable renseigné à travers les valeurs des balises susmentionnées. Du coup, chaque réseau social s’y est mis. Voilà un exemple pour Linkedin :

<meta property="og:title" content="'.$site_title.'" />
<meta property="og:description" content="'.$site_content.'" />
<meta property="og:image" content="seo/share.png" />
<meta property="og:url" content="'.$url_online.'" />

Vous voyez que c’est légèrement différent, mais qu’au fond, on nous demande toujours la même chose.
D’où le fait de créer une fonction qui va ensuite rendre toutes les balises avec le titre et la description commune aux autres plateformes. Ce cas-ci ne vaut donc que si vous souhaitez contacter de la même manière sur toutes les plateformes, ce qui n’est d’ailleurs pas forcément le cas. Vous pouvez retrouver cette fonction dans le fichier config.php sur mon projet « Peregrin » déposé sur Github. Elle prend en tout et pour tout 4 paramètres. Le titre, la description, l’URL de la page en cours et l’URL de l’image. C’est ensuite à vous de l’insérer entre les balises <head /> et de dynamiser le contenu via les 4 variables proposées.

Et pour React par exemple ?

Sous React, et donc, via un framework JS, il est inhabituel de modifier les balises <Head />. Mais des librairies peuvent vous aider à le faire. Moi j’ai opté depuis longtemps pour la librairie « Helmet« . L’avantage avec ce modules c’est que c’est un composant, et que vous pouvez dès lors lui passer ses valeurs dynamiques (titre, descriptionn, etc.) via son composant parent. Voilà à quoi resemble un composant Helmet :

      <Helmet>
        <title>{title}</title>
        <meta name="language" content={lang} />
        <meta name="description" content={description} />
        <meta name="author" content={author} />

        <meta name="robots" content="all" />
        <meta property="og:title" content={title} />
        <meta property="og:locale" content={lang}/>
        <meta property="og:description" content={description} />
        <meta property="og:author" content={author} />
        <meta property="og:type" content={type} />
        <meta property="og:url" content={url} />
        <meta property="og:image" content={image} />
      </Helmet>

Dans tous les cas, il faudra de toute façon dynamiser vos valeurs. Vos pages ont normalement toutes un nom unique et une description unique. Si ce n’est pas le cas, vous serez pénalisé en SEO. Trouver une méthode afin de les dynamiser vous fera gagner du temps.

Avec PHP

Une fonction est alors toute indiquée

Et pour React par exemple ?

Newsletter