Le protocole
Open Graph est un standard Web développé à l'origine par Facebook qui transforme n'importe quelle page Web en objet graphique avec titre, description, image, etc. Même s'il n'y a pas de corrélation directe entre les balises META OG et les classements SEO améliorés, il génère toujours plus de trafic vers votre page Web en la rendant plus «attrayante» sur les réseaux sociaux (Facebook, Twitter, Linkedin, etc.).
Un exemple de lien partagé sur Twitter qui a "og: image" et "og: title".
Ajout de balises méta OG (et pas seulement) dans votre application React
Sans plus
/public/index.html à l'application React nouvellement créée avec les balises meta
/public/index.html create-react-app et OG dans
/public/index.html . Cela devrait ressembler à quelque chose comme ceci:
<!DOCTYPE html> <html> <head> <meta charSet="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <link rel="alternate" type="application/rss+xml" href="/rss.xml"/> <title>Awesome App</title> <meta property="og:title" content="Awesome app - the best app ever" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://picsum.photos/id/52/1200/600" /> <meta property="og:description" content="Describe stuff here." /> <meta property="og:url" content="yourawesomeapp.com" /> </head> <body> <noscript>This app works best with JavaScript enabled.</noscript> <div id="root"></div> </body> </html>
Balises dynamiques
Maintenant, que se passe-t-il si j'ai besoin de générer des balises de manière dynamique pour chaque page? C'est simple!
Nous utiliserons
React Helmet . Créons donc un composant distinct pour la gestion de l'en-tête du document, qui définira dynamiquement le titre, la description et l'image de la page.
import React from 'react'; import Helmet from 'react-helmet'; function SEO({ pageProps }) { return ( <Helmet> <title>{pageProps.title}</title> <meta property="og:title" content={pageProps.title} /> <meta property="og:image" content={pageProps.thumbnail} /> <meta property="og:url" content={pageProps.url} /> </Helmet> ) } export default SEO;
Partout où nous voulons définir nos balises META, nous allons simplement monter le composant SEO sur les arguments nécessaires comme
<SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />