Integrar e verificar suas metatags

Objetivos de aprendizagem

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

• Listar as classes de API que você pode usar para gerar metatags.
• Descrever onde se adicionam metatags em uma página.
• Listar a propriedade e o contêiner que você pode usar para tratar metatags.
• Listar três coisas que você deve fazer para verificar suas metatags finais.

Automatizar a geração de metatags

Brandon quer automatizar parte de seu processo de geração de metatags e isso significa adicioná-lo ao código do aplicativo de sua loja virtual. A automação é uma ótima ideia, porque elimina problemas que as pessoas podem introduzir com um processo manual e adiciona outro par de olhos para analisar os metadados resultantes.

Modificar o aplicativo da loja virtual é uma tarefa do desenvolvimento, então Brandon procura mais uma vez Vijay Lahiri, o desenvolvedor da Cloud Kicks. 

Vijay faz suas alterações em uma sandbox e, em seguida, carrega o código para uma instância de preparação. A partir daí, ele (ou o administrador) replica o código nas instâncias de desenvolvimento e de produção.

Embora Brandon não adicione código a um aplicativo, ele quer aprender como isso é feito e por quê, para que possa ter um quadro completo de como implementar SEO à medida que ocorrem alterações em seus dados da loja virtual. Ele dá uma olhada no módulo Salesforce B2C Commerce for Developers para atualizar seu conhecimento sobre a terminologia de desenvolvimento do B2C Commerce.

APIs do B2C Commerce

Vijay usa a API do Salesforce B2C Commerce para integrar metatags no aplicativo da sua loja virtual.

Essas são as classes de API que ele usa.

Vijay usa essas classes para tratar os metadados em cada página do B2C Commerce com dados de produtos e de conteúdo. Ele usa a propriedade pageMetaTags para preencher metatags dentro da seção head do HTML em uma página.

O B2C Commerce usa essas classes dentro do contêiner dw.web.PageMetaData e disponibiliza os resultados durante a geração de páginas. O B2C Commerce gera o conteúdo das metatags com base no contexto e regras de metatags do escopo, seja a partir do contexto atual de escopo ou herdado de um contexto de escopo principal. 

O código de Vijay inclui um controlador e um modelo. Ele dá uma olhada no cartridge base da Salesforce Reference Architecture (SFRA), que inclui o controlador Page.js e o modelo htmlHead.isml (comum/layout) para entender como tratar metadados de página e metatags.

Código do controlador

Veja um exemplo do código JavaScript que Vijay usa para atualizar metatags.

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);
}
},

Código modelo

O contêiner dw.web.PageMetaData (API) faz a conexão entre o arquivo js e o arquivo isml. Ele é compatível com uma abordagem em loop, criando todas as metatags de página com facilidade dentro de um modelo do B2C Commerce, como mostrado neste exemplo.

<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>

Código de verificação e contingência

Vijay usa este código modelo para verificar se as metatags de página estão sendo geradas e executam o comportamento de contingência.

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

Verificar suas metatags

Com a ajuda de Vijay, Brandon está pronto para analisar suas novas metatags e se preparar para o futuro.

Veja o que eles analisam.

• Verificar se todas as páginas e conteúdos têm tags de título e metadescrições.
• Prestar atenção aos headings e em como eles estruturam seu conteúdo.
• Certificar-se de que todas as imagens tenham texto alt.
• Usar as metatags do robô para orientar os mecanismos de pesquisa sobre como eles devem acessar seu conteúdo.
• Pesquisar por páginas duplicadas e usar tags canônicas para evitar a canibalização de seu próprio conteúdo com conteúdo duplicado ou similar.
• Criar uma lista de verificação das etapas que você precisa cumprir ao criar conteúdo novo e adicionar metatags a essa rotina.

Vamos concluir

Nesta unidade, você aprendeu como pode adicionar código de processamento de metatags ao seu aplicativo e como verificar suas tags finais e se preparar para alterações futuras. No início deste módulo, você explorou regras de metatags e aprendeu a criá-las no Business Manager. Agora é hora de fazer o último teste e ganhar um novo e incrível emblema.

Recursos

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