O protocolo
Open Graph é um padrão da web desenvolvido originalmente pelo Facebook que transforma qualquer página da Web em um objeto gráfico com título, descrição, imagem e assim por diante. Embora não exista correlação direta entre as metatags OG e as melhores classificações de SEO, ele ainda gera mais tráfego para sua página da Web, tornando-a mais "atraente" nas redes sociais (Facebook, Twitter, Linkedin etc.).
Um exemplo de um link compartilhado no Twitter que possui "og: image" e "og: title".
Adicionando metatags OG (e não apenas) ao seu aplicativo React
Sem
/public/index.html vamos pular para o aplicativo React recém-criado com as meta tags
/public/index.html -
/public/index.html create-react-app e OG para
/public/index.html . Deve ser algo como isto:
<!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>
Tags dinâmicas
Agora, e se eu precisar gerar tags dinamicamente para cada página? Isso é fácil!
Vamos usar o
React Helmet . Então, vamos criar um componente separado para o gerenciamento do cabeçalho do documento, que definirá dinamicamente título, descrição e imagem para a 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;
Onde quisermos definir nossas metatags, montaremos o componente SEO nos argumentos necessários, como
<SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />