Integrar e verificar suas metatags para lojas (virtuais) SFRA

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

• Listar as classes de API que você usa para gerar metatags.
  
• Identificar a localização das metatags em uma página.
  
• Listar a propriedade e o contêiner que você pode usar para tratar metatags.
  
• Descrever como você verifica suas metatags finais.
  
• Descrever como você avalia sua implementação de SEO.
  

As instruções e os exemplos de código desta unidade se aplicam exclusivamente a lojas (virtuais) Storefront Reference Architecture (SFRA). Eles não são compatíveis com lojas (virtuais) Storefront Next ou PWA Kit.

Nas duas últimas unidades, você aprendeu o que são metatags e configurou e visualizou regras no Business Manager. Nesta unidade, você aprende como executar parte da geração de metatags automaticamente dentro da sua aplicação de loja (virtual). Automatizar esse processo mantém seus metadados precisos e atualizados à medida que os dados de produtos e conteúdo evoluem, além de eliminar erros humanos que podem ocorrer com atualizações manuais.

Como a automação exige a escrita de código de aplicação, ela é principalmente uma tarefa de desenvolvimento. Você vai trabalhar com um desenvolvedor nesta parte, mas é importante entender como e por que isso funciona para que você possa projetar e gerenciar sua implementação de SEO com eficácia.

Explorar as APIs de metatags do Salesforce B2C Commerce

O desenvolvedor usa a API do B2C Commerce para obter as metatags de página geradas a partir das suas regras. Veja as classes de API que mapeiam cada tipo de página.

O desenvolvedor usa essas classes para gerenciar os metadados em cada página com os dados de produtos e conteúdo do B2C Commerce. A propriedade pageMetaTags preenche as metatags dentro da seção head do HTML em uma página. O B2C Commerce trabalha com essas classes dentro do contêiner dw.web.PageMetaData e disponibiliza os resultados durante a geração do cabeçalho. O conteúdo é gerado a partir do escopo e das regras que você define, seja pelo contexto de escopo atual ou herdado de um contexto de escopo superior.

Explorar o código do controlador

Veja o código JavaScript que adiciona as metatags da página ao contêiner dw.web.PageMetaData, tornando-as disponíveis durante a geração do cabeçalho.

updatePageMetaTags: function (object)
 {
   if ( object.class === dw.content.Content
       || object.class === dw.system.Site
       || object.class === dw.catalog.Product
       || object.class === dw.catalog.ProductSearchModel
       || object.class === dw.content.ContentSearchModel)
   {
       var pageMetaData = request.pageMetaData;
       pageMetaData.addPageMetaTags(object.pageMetaTags);
   }
 },

Explorar o código do modelo

O contêiner dw.web.PageMetaData suporta uma abordagem de loop que cria todas as metatags da página de forma simples dentro de um modelo. Veja o código do modelo.

<iscomment>Rule based page meta tags</iscomment>
<isloop items="${pdict.CurrentPageMetaData.getPageMetaTags()}" var="pageMetaTag">
    <isif condition="${pageMetaTag.title}">
        <title><isprint value="${pageMetaTag.content}"/></title>
    <iselseif condition="${pageMetaTag.name}">
        <meta name="<isprint value="${pageMetaTag.ID}">" content="<isprint value="${pageMetaTag.content}">">
    <iselseif condition="${pageMetaTag.property}">
        <meta property="<isprint value="${pageMetaTag.ID}">" content="<isprint value="${pageMetaTag.content}">">
    </isif>
</isloop>

(A fonte apresenta essa função de controlador e esse loop de modelo como exemplos genéricos. Ela não menciona um cartridge, arquivo de controlador ou arquivo de modelo específico.)

Verificar tags geradas e adicionar conteúdo de contingência

O que acontece quando uma página não tem descrição gerada? Você escreve o conteúdo de contingência para esse caso. O método isPageMetaTagSet('description') verifica se uma metatag de página é gerada e o código exibe o conteúdo de contingência quando isso não ocorre. Veja o código do modelo.

<isif condition="${!pdict.CurrentPageMetaData.isPageMetaTagSet('description')}">
    <meta name="description" content="Add here your fallback description!">
</isif>

Agora, todas as páginas têm uma descrição, seja proveniente de uma regra ou do seu texto de contingência.

Verificar suas metatags

Com a automação implementada, você revisa sua loja (virtual) e se prepara para conteúdos futuros. Veja o que você verifica.

• Confirme que as páginas e o conteúdo têm tags de título e metadescrições.
  
• Prestar atenção aos headings e em como eles estruturam seu conteúdo. Use as tags HTML corretamente para que os mecanismos de pesquisa leiam um código semanticamente significativo, como h1 e outras tags de cabeçalho. Atribua a cada página um único h1 para o assunto principal, como o nome do produto em uma PDP. Use as tags h2 e h3 para organizar o conteúdo de suporte.
  
• Adicione texto ALT descritivo a todas as imagens de produtos para que os rastreadores interpretem o conteúdo visual.
  
• Use as metatags de robôs para orientar os mecanismos de pesquisa sobre como eles acessam seu conteúdo.
  
• Pesquise conteúdo duplicado e adicione URLs canônicas para evitar competir com seu próprio conteúdo semelhante.
  

(Essas verificações vêm das práticas recomendadas de SEO e da documentação de tag de URL canônica. A fonte não as apresenta como um conjunto fixo de “três itens.”)

Avalie sua implementação de SEO

Verificar suas tags é apenas uma parte do trabalho. Você também avalia o desempenho do seu site para os mecanismos de pesquisa. Várias ferramentas de baixo custo ajudam você a entender o quanto seu site está preparado para SEO. Quantidade não é sinônimo de qualidade e, no fim das contas, SEO é sobre gerar tráfego qualificado que resulte em conversões.

Veja o que você deve fazer.

• Use o URL Request Analyzer (Analisador de solicitações de URL) para revisar como sua loja (virtual) processa solicitações de URL e como sua configuração abre a página correspondente.
  
• Use as ferramentas do Google Webmaster Tools para entender como seu site é indexado e qual é o seu desempenho no Google, incluindo informações de rastreamento, avaliação do robots.txt, principais consultas de pesquisa e possíveis problemas.
  
• Verifique quantas páginas estão indexadas no momento. Faça uma pesquisa com site:(domain) no mecanismo de pesquisa relevante, como site:demandware.com.
  
• Verifique se há armadilhas para spiders usando um navegador somente de texto para ver o que os spiders enxergam.
  
• Teste suas páginas de erro 404 com caminhos alternativos. Insira uma URL inválida para gerar um erro 404.
  

A configuração do robots.txt também é importante para rastreadores de IA, como GPTBot, ClaudeBot e PerplexityBot. Esses rastreadores solicitam seu arquivo robots.txt para determinar quais páginas acessam, e muitos deles não executam JavaScript. Confirme que as informações principais do produto, como nomes, descrições e preços, aparecem na resposta HTML renderizada pelo servidor.

Crie uma lista de verificação das etapas que você segue ao criar conteúdo e adicione meta tags a essa rotina. Um hábito regular mantém seus metadados atualizados à medida que seu catálogo cresce.

Finalização

Nesta unidade, você aprendeu a trabalhar com desenvolvedores para automatizar a geração de metatags usando as classes de API do B2C Commerce no código do controlador e do modelo. Você aprendeu a verificar a implementação de metadados conferindo o conteúdo da página e avaliando o desempenho do site com ferramentas de diagnóstico de SEO.

Neste emblema, você aprendeu a otimizar uma loja (virtual) para mecanismos de pesquisa definindo regras de metatags no Business Manager, automatizando a geração delas por meio de APIs e validando a implementação.

Recursos

• Ajuda do Salesforce: API do B2C Commerce
• Trailhead: Salesforce B2C Commerce para desenvolvedores