El protocolo
Open Graph es un estándar web desarrollado originalmente por Facebook que convierte cualquier página web en un objeto gráfico con título, descripción, imagen, etc. Aunque no existe una correlación directa entre las metaetiquetas OG y las clasificaciones SEO mejoradas, aún genera más tráfico en su página web al hacerla más "atractiva" en las redes sociales (Facebook, Twitter, Linkedin, etc.).
Un ejemplo de un enlace compartido en Twitter que tiene "og: image" y "og: title".
Agregar metaetiquetas OG (y no solo) en su aplicación React
Sin más debido, pasemos a la aplicación React recién creada con
create-react-app y metaetiquetas OG a
/public/index.html . Debería verse así:
<!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>
Etiquetas dinámicas
Ahora, ¿qué pasa si necesito generar etiquetas dinámicamente para cada página? Eso es facil!
Usaremos
React Helmet . Así que creemos un componente separado para la gestión de encabezados de documentos, que establecerá dinámicamente el título, la descripción y la imagen de la página.
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;
Donde queramos establecer nuestras metaetiquetas, solo montaremos el componente SEO a los argumentos necesarios, como
<SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />