Meta tags são tags HTML especiais que oferecem mais detalhes sobre sua página da web para mecanismos de pesquisa e visitantes do site.
Como você pode deduzir desta definição, meta as tags são vitais para o Search Engine Optimization (SEO). Não só isso-você já viu a bela prévia que aparece quando você compartilha um link em plataformas sociais como Facebook ou Twitter? Isso é possível graças às metatags.
Portanto, se você deseja que seu aplicativo se destaque nos resultados da pesquisa e nas redes sociais e plataformas de mensagens, é necessário configurar metatags. Em particular, você deve sempre especificar as metatags do protocolo Open Graph , que é o protocolo mais usado para fornecer informações sobre qualquer página da web na web.
Existem duas maneiras principais de fazer isso em um aplicativo React. Se suas metatags forem estáticas, basta escrevê-las no index.html do seu aplicativo e você está pronto para ir.
Se você deseja configurar metatags dinâmicas com base em diferentes URLs em seu projeto ( por exemplo,/home,/about,/detail? id=1,/detail? id=2), você deve fazer isso do lado do servidor. Os rastreadores da web nem sempre executam o código JavaScript ao examinar uma página da web, então, se você quiser ter certeza de que eles lerão suas metatags, será necessário configurá-los antes que o navegador receba a página. , aí vem a pergunta que o trouxe até aqui: e se eu não tiver a renderização do lado do servidor (SSR) para meu aplicativo? Neste artigo, veremos uma solução simples e eficaz aplicada a este cenário do mundo real.
O que faremos
Vamos supor que você tenha um blog criado com Criar aplicativo React (CRA) . Seu blog tem duas rotas:
/a página inicial, onde os usuários podem ver uma lista de postagens/post? Id=
A segunda rota é onde nós’Precisamos colocar metatags dinâmicas porque queremos alterar as tags og: title, og: description e og: image com base no
Para conseguir isso , serviremos nosso aplicativo a partir de um back-end Node/Express. Antes de retornar a resposta ao navegador, injetaremos as tags desejadas no
da página.Vamos nos organizar
Crie o projeto executando npx create-react-app dynamic-meta-tags. Vou manter o modelo inicial do CRA para que possamos nos concentrar diretamente no ponto de nosso interesse.
Antes de passarmos para o código de back-end, precisamos adicionar os marcadores de posição da tag na página index.html. Posteriormente, substituiremos esses marcadores pelas informações da postagem antes de retornar a página.
… …
Adicionar uma pasta do servidor no mesmo nível da pasta src e crie um novo arquivo index.js. A estrutura do projeto deve ser assim:
Configurando o back-end Node/Express
Instale o Express com npm i express e abra o arquivo server/index.js. Vamos começar a escrever nosso back-end.
A primeira coisa a fazer é configurar um middleware para servir recursos estáticos da pasta de construção.
const express=require (‘express’); const app=express (); const path=require (‘path’); const PORT=process.env.PORT || 3000;//recursos estáticos devem ser servidos apenas como são app.use (express.static (path.resolve (__ dirname,’..’,’build’), {maxAge:’30d’},));
Em seguida, preparamos o servidor para escutar na porta definida.
app.listen (PORT, (erro)=> {if (erro) {return console.log (‘Erro durante a inicialização do aplicativo’, erro );} console.log (“ouvindo em”+ PORT +”…”);});
Para fins de teste, criei uma lista estática de postagens em server/stub/posts.js. Como você pode ver no código abaixo, cada postagem possui um título, uma descrição e uma miniatura. getPostById é a função que usaremos para obter uma postagem específica da lista.
const posts=[{title:”Post # 1″, description:”Esta é a primeira postagem”, miniatura:”https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80} Este é o título:”Post, # 2,”a descrição””, miniatura:”https://images.unsplash.com/photo-1625034712314-7bd692b60ecb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=q=80&fit=crop&w title:”descrição:”Esta é a terceira postagem”, miniatura:”https://images.unsplash.com/photo-1625034892070-6a3cc12edb42?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto}.exports.getPostById=id=> posts [id-1];
Naturalmente, em um projeto real, esses dados podem ser recuperados de um banco de dados ou de outra fonte remota.
Lidando com solicitações
Agora podemos nos concentrar no manipulador principal.
//aqui servimos a página index.html app.get (‘/*’, (req, res, next)=> {//TODO});
Aqui está o que vamos fazer:
Leia a página index.html da pasta de construção Obtenha a postagem solicitada Substitua os marcadores de posição da metatag pelos dados da postagem Retorne os dados HTML
A primeira etapa é carregar a página de índice na memória. Para fazer isso, aproveitamos a função readFile do módulo fs.
const indexPath=path.resolve (__ dirname,’..’,’build’,’index.html’); app.get (‘/*’, (req, res, next)=> {fs.readFile (indexPath,’utf8′, (err, htmlData)=> {if (err) {console.error (‘Erro durante o arquivo lendo’, err); return res.status (404).end ()}//TODO obter informações da postagem//TODO injetar meta tags});});
Assim que conseguirmos, usamos getPostById para obter a postagem solicitada com base no ID passado como uma string de consulta.
app.get (‘/*’, (req, res, next)=> {fs.readFile (indexPath,’utf8′, (err, htmlData)=> {if (err) {console.error (‘Erro durante a leitura do arquivo’, err); return res.status (404).end ()}//obter informações da postagem const postId=req.query.id; const post=getPostById (postId); if (! post) return res.status (404).send (“Post não encontrado”);//TODO injetar meta tags}) ;});
Em seguida, substituímos os marcadores de posição pelo título, descrição e miniatura da postagem.
app.get (‘/*’, (req, res, next)=> {fs.readFile (indexPath,’utf8′, (err, htmlData)=> {if (err) {console.error (‘Erro durante a leitura do arquivo’, err); return res.status (404).end ()}//obter informações do post const postId=req.params.id; const post=getPostById (postId); if (! post) return res.status (404).send (“Post not found”);//injetar meta tags htmlData=htmlData.replace (“
Também substituímos o título da página padrão pelo título da postagem.
Por fim, enviamos os dados HTML para o cliente.
Para recapitular, este é o nosso servidor/index.js deve ser semelhante a:
const express=require (‘express’); const path=require (‘path’); const fs=require (“fs”); const {getPostById}=require (‘./stub/posts’); const app=express (); const PORT=process.env.PORT || 3000; const indexPath=path.resolve (__ dirname,’..’,’build’,’index.html’);//recursos estáticos devem ser servidos apenas como são app.use (express.static (path.resolve (__ dirname,’..’,’build’), {maxAge:’30d’},));//aqui servimos a página index.html app.get (‘/*’, (req, res, próximo)=> {fs.readFile (indexPath,’utf8′, (err, htmlData)=> {if (err ) {console.error (‘Erro durante a leitura do arquivo’, err); return res.status (404).end ()}//obter informações de postagem const postId=req.query.id; const post=getPostById (postId); if (! post) return res.status (404).send (“Post not found”);//injetar meta tags htmlData=htmlData.replace (“
Executando testes
Testando nosso aplicativo
Para executar o aplicativo, primeiro precisamos gerar uma nova compilação com npm run build e, em seguida, podemos executar o servidor com node server/index.js.
Como alternativa, você pode definir um novo script em seu arquivo package.json para automatizar essa tarefa. Conforme mostrado abaixo, chamei-o de “servidor”, então agora posso executar o aplicativo com o servidor npm run.
“scripts”: {“start”:”react-scripts start”,”build”:”react-scripts build”,”test”:”react-scripts test”,”eject”:”react-scripts eject”,”server”:”npm run build && node server/index.js”}
Se tudo funcionar, seu aplicativo agora está sendo executado em http://localhost: 3000 . No meu caso, ele apenas exibe a página inicial padrão do CRA.
Testando nossas metatags dinâmicas
Agora, vamos testar o que realmente importa para nós: metatags!
Você deve obter as metatags corretas para a primeira postagem abrindo a URL http://localhost: 3000/post? id=1 Você pode vê-los abrindo o painel Inspecionar para visualizar a página e ver a tag
. 
O mesmo deve acontecer para a postagem 2 e postagem 3.
Testando a visualização da página antes de publicar o aplicativo
Se você precisar testar as visualizações da página antes de publicar seu aplicativo, pode usar plataformas como opengraph.xyz que permite testar a visualização examinando as metatags em sua página. Para testá-lo, precisamos de um URL acessível publicamente.
Para obter um URL público para nosso ambiente local, podemos usar uma ferramenta chamada localtunnel . Depois de instalá-lo com npm i localtunnel, podemos executá-lo executando lt–port 3000. Ele se conectará ao servidor de túnel, configurará o túnel e nos fornecerá a URL para usar em nossos testes.
Com isso instalado, podemos testar em opengraph.xyz . Se você fez tudo certo, deverá ver algo assim:
Conclusão
Vimos como adicionar metatags dinamicamente a um aplicativo React. Claro, o que usei como exemplo é apenas um dos cenários possíveis em que você pode aplicar esta solução. Você pode encontrar o repositório de suporte em meu GitHub .
Esteja ciente de que o código de back-end que escrevi está focado apenas em adicionar as metatags para que as coisas fossem mais diretas para este artigo. Se você planeja usar esta solução na produção, certifique-se de adicionar pelo menos o mecanismo de segurança básico para evitar vulnerabilidades como XSS e CSRF. No site do Express, você pode encontrar uma seção inteira dedicada às melhores práticas de segurança .
