{"id":5321,"date":"2024-02-29T10:00:15","date_gmt":"2024-02-29T13:00:15","guid":{"rendered":"https:\/\/www.wavecommerce.com.br\/blog\/?p=5321"},"modified":"2024-02-29T17:04:12","modified_gmt":"2024-02-29T20:04:12","slug":"seo-para-vtex-io","status":"publish","type":"post","link":"https:\/\/www.wavecommerce.com.br\/blog\/seo-para-vtex-io\/","title":{"rendered":"SEO para VTEX IO – Guia Completo"},"content":{"rendered":"

A VTEX IO \u00e9 uma das maiores plataformas de ecommerce do Brasil<\/strong>, principalmente por sua multifuncionalidade e facilidade de utiliza\u00e7\u00e3o. Por se tratar de uma plataforma low-code, desenvolver seu site em IO<\/strong> se torna uma tarefa f\u00e1cil e repleta de possibilidades. Al\u00e9m disso, a VTEX tamb\u00e9m \u00e9 conhecida por ser extremamente flex\u00edvel, suportando uma grande variedade de recursos e customiza\u00e7\u00f5es diferentes<\/strong>.<\/p>\n

Tudo isso abre uma grande margem para otimizar o SEO para VTEX IO. At\u00e9 mesmo para lojistas que n\u00e3o s\u00e3o especialistas no assunto, a plataforma \u00e9 extremamente eficiente para colocar seu site no topo das pesquisas<\/b>. Por isso, a Wave Commerce criou esse artigo para explicar um pouco mais sobre o SEO, as diferen\u00e7as de VTEX CMS e VTEX IO, e por fim dicas para otimizar o SEO nessa plataforma!<\/p>\n

Diferen\u00e7as VTEX CMS e VTEX IO<\/h2>\n

De forma breve, muitos consideram o VTEX IO como um upgrade do VTEX CMS<\/b> (Sistema de Gerenciamento de Conte\u00fado), que mesmo com pouco uso internacional, ainda tem relev\u00e2ncia no Brasil. Atualmente, a maioria dos projetos come\u00e7a diretamente no VTEX IO, e mesmo aqueles que n\u00e3o o fazem t\u00eam a op\u00e7\u00e3o de migrar para essa plataforma.<\/p>\n

Mas essencialmente, qual a diferen\u00e7a entre as duas plataformas? O que faz uma delas ser amplamente preferida em detrimento da outra?<\/p>\n

Lembram-se de mencionarmos anteriormente que uma das principais vantagens do VTEX IO \u00e9 ser uma plataforma low-code? Isso \u00e9 vantajoso, pois essa plataforma n\u00e3o exige<\/b> que o usu\u00e1rio tenha um amplo conhecimento em programa\u00e7\u00e3o<\/b>, tornando o processo muito mais pr\u00e1tico e acess\u00edvel para a maioria das pessoas.<\/p>\n

No entanto, essa n\u00e3o \u00e9 a realidade do VTEX CMS<\/b>, que tem sua estrutura fundamentada em HTML, CSS e JavaScript. Isso significa que os usu\u00e1rios precisam preencher diversos requisitos e ter um conhecimento pr\u00e9vio antes de conseguirem utilizar efetivamente essa plataforma.<\/p>\n

SEO On-Page e Off-Page: qual a diferen\u00e7a?<\/h2>\n

Agora que aprendemos as diferen\u00e7as entre plataformas, como posso otimizar meu SEO para VTEX IO? Para entrarmos nisso, antes precisamos fazer uma breve introdu\u00e7\u00e3o das diferentes formas de SEO<\/b>, e mais especificamente nas diferen\u00e7as entre SEO On-Page e SEO Off-Page.<\/p>\n

O SEO On-Page engloba todas as a\u00e7\u00f5es realizadas internamente em um site, visando torn\u00e1-lo mais importante, index\u00e1vel, ordenado e, principalmente, trazer uma experi\u00eancia de qualidade para o p\u00fablico-alvo. Simplificando, o SEO On-Page trata de tudo que est\u00e1 sob nosso dom\u00ednio no pr\u00f3prio site, onde podemos otimizar elementos e conte\u00fado<\/strong>.<\/p>\n

SEO Off-Page, por outro lado, concentra-se nos fatores externos que n\u00e3o est\u00e3o diretamente ligados \u00e0 estrutura do site<\/strong>, mas que t\u00eam um impacto significativo na forma como outras p\u00e1ginas o percebem e relacionam-se com o seu. Isso inclui pr\u00e1ticas como constru\u00e7\u00e3o de links, men\u00e7\u00f5es em redes sociais, gest\u00e3o de perfis em plataformas e muito mais.<\/p>\n

Nos pr\u00f3ximos segmentos, exploraremos estrat\u00e9gias de SEO eficazes para plataformas VTEX, se utilizando de ferramentas que est\u00e3o presentes dentro dessa plataforma, para melhor compreender como otimizar a visibilidade e a classifica\u00e7\u00e3o de seu site.<\/p>\n

1. Arquitetura da Informa\u00e7\u00e3o (AI)<\/h2>\n

Neste t\u00f3pico, exploraremos a eficiente organiza\u00e7\u00e3o das informa\u00e7\u00f5es em seu site, tornando-o intuitivo e conveniente para os usu\u00e1rios. Arquitetura da Informa\u00e7\u00e3o, ou AI, \u00e9 como esse campo de estudo, dedicado \u00e0 distribui\u00e7\u00e3o e organiza\u00e7\u00e3o de conte\u00fado, \u00e9 conhecido.<\/p>\n

Essa \u00e1rea visa determinar a melhor maneira de construir o site<\/strong>, assegurando uma experi\u00eancia cont\u00ednua, agrad\u00e1vel e pr\u00e1tica para os visitantes. Essa organiza\u00e7\u00e3o desempenha um papel crucial na preven\u00e7\u00e3o da frustra\u00e7\u00e3o que ocorre quando n\u00e3o conseguimos encontrar o que procuramos em um site, resultando em uma sensa\u00e7\u00e3o de desorienta\u00e7\u00e3o.<\/p>\n

Podemos analogar essa abordagem ao ambiente f\u00edsico, como a disposi\u00e7\u00e3o de lojas e mercados, onde mesmo em uma primeira visita, podemos localizar a maioria dos itens desejados. <\/b>Isso se deve \u00e0 clara separa\u00e7\u00e3o de se\u00e7\u00f5es e categorias, mantendo produtos relacionados pr\u00f3ximos uns dos outros.<\/p>\n

No mundo virtual, essa organiza\u00e7\u00e3o tamb\u00e9m \u00e9 essencial e pode fazer uma grande diferen\u00e7a na experi\u00eancia do usu\u00e1rio. Uma dica \u00fatil \u00e9 considerar a estrutura casa\/departamento\/categoria\/subcategoria, que pode servir como modelo para planejar a organiza\u00e7\u00e3o de sua plataforma.<\/p>\n

Exploramos nossa busca a partir do Menu em uma loja virtual, e \u00e9 por estarmos t\u00e3o acostumados a esse procedimento que o percorremos de maneira instintiva.<\/p>\n

Caso seu E-commerce ainda n\u00e3o possui uma estrutura, propomos essa:<\/p>\n

In\u00edcio<\/strong><\/em> \u2192 Categorias<\/strong><\/em> \u2192 Subcategorias<\/strong><\/em> \u2192 Produtos<\/strong><\/em><\/p>\n

Por exemplo:<\/p>\n

In\u00edcio<\/strong><\/em> \u2192 Eletrodom\u00e9sticos<\/strong><\/em> \u2192 Geladeira<\/strong><\/em> \u2192 Geladeira Frost Free Samsung Inox<\/strong><\/em><\/p>\n

Na plataforma VTEX, criar essa estrutura \u00e9 descomplicado:<\/p>\n

    \n
  • Comece criando as categorias, sendo que a primeira categoria ser\u00e1 sempre a de n\u00edvel superior, a \u201craiz\u201d.<\/li>\n
  • Dentro da loja, no painel de administra\u00e7\u00e3o, entre no m\u00f3dulo de Cat\u00e1logo.<\/li>\n
  • Navegue at\u00e9 Categorias e selecione o primeiro n\u00edvel de categorias.<\/li>\n
  • Bot\u00e3o: “A\u00e7\u00f5es” e depois: “Incluir”.<\/li>\n<\/ul>\n

    \"Arquitetura<\/p>\n

    A seguir, voc\u00ea deve completar campos relacionados ao cadastro da categoria. Isso inclui:<\/p>\n

    Nome<\/b>: Seja claro e direto no nome da categoria. A estrutura da URL da categoria ser\u00e1 influenciada por ele.<\/p>\n

    Title Tag\/T\u00edtulo da P\u00e1gina da Categoria<\/strong>: O t\u00edtulo da p\u00e1gina da categoria afeta o que aparece nos resultados dos buscadores de pesquisa.<\/p>\n

    Descri\u00e7\u00e3o da Categoria (Meta Description)<\/b>: Fa\u00e7a uma breve descri\u00e7\u00e3o com at\u00e9 160 caracteres, pois \u00e9 o limite que o Google mostra.<\/p>\n

    Categoria Global VTEX<\/b>: Classifica sua categoria em ferramentas pagas de divulga\u00e7\u00e3o. Campo tamb\u00e9m obrigat\u00f3rio.<\/p>\n

    \"Categorias<\/p>\n

    Ap\u00f3s preencher esses campos, siga estas etapas:<\/p>\n

      \n
    • Ative a categoria, fazendo ela aparecer na sua loja online.<\/li>\n
    • Seguindo especifica\u00e7\u00f5es do SKU, escolha o modo de exibi\u00e7\u00e3o de produtos, fazendo a plataforma seguir a ordem estabelecida.<\/li>\n
    • Aperte em \u201cSalvar\u201d.<\/li>\n<\/ul>\n

      Com a cria\u00e7\u00e3o do primeiro departamento, sua estrutura de informa\u00e7\u00f5es come\u00e7a a tomar forma. Em seguida, fa\u00e7a um processo igual para criar outras categorias, sendo definidas sob uma “Categoria Pai”.<\/p>\n

      Se ainda n\u00e3o estiver claro, voltando ao exemplo anterior, considere o departamento “Eletrodom\u00e9sticos”:<\/p>\n

      Eletrodom\u00e9sticos \u2192 Geladeiras \u2192 Geladeiras Samsung \u2192 Geladeira Samsung Side by Side 602 Litros Inox<\/p>\n

      A categoria “Eletrodom\u00e9sticos” \u00e9 a “Categoria Pai” da categoria “Geladeiras”, que \u00e9 a “m\u00e3e” da categoria “Geladeiras Samsung”, que finalmente, \u00e9 a “m\u00e3e” do objeto “Geladeira Samsung Side by Side RS60 602 Litros Inox”<\/p>\n

      2. Breadcrumbs: A Hist\u00f3ria de Jo\u00e3o e Maria<\/h2>\n

      O breadcrumb, \u00e0s vezes chamado de navega\u00e7\u00e3o estrutural, \u00e9 como um mapa que ajuda voc\u00ea a entender onde est\u00e1 em um site<\/b>. \u00c9 como as migalhas de p\u00e3o que mostram o caminho de volta para a casa da vov\u00f3 na hist\u00f3ria de Jo\u00e3o e Maria. No contexto de um site, o breadcrumb ajuda a mostrar a ordem das p\u00e1ginas<\/b>, como se fossem andares em um pr\u00e9dio, para que voc\u00ea saiba onde est\u00e1 e como voltar.<\/p>\n

      Isso \u00e9 \u00fatil para pessoas que visitam o site e tamb\u00e9m para os rob\u00f4s do Google que classificam as p\u00e1ginas. Em resumo, o breadcrumb \u00e9 uma ajuda importante para a navega\u00e7\u00e3o em um site. Os breadcrumbs ficam geralmente no canto superior esquerdo do site e se parecem assim:<\/p>\n

      \"Breadcrumbs\"<\/p>\n

      Cada categoria \u00e9 como um link especial que permite que voc\u00ea v\u00e1 para diferentes partes do site. Pense neles como as setas que o levam de volta para onde voc\u00ea estava, como se estivesse andando por uma casa e voltando para o hall. Os breadcrumbs ajudam a espalhar a aten\u00e7\u00e3o por todo o site, assim como compartilhar um peda\u00e7o de chocolate com os amigos faz com que todos se sintam importantes.<\/p>\n

      Um dos controles da lista de VTEX \u00e9 o <VTEX.cmc:breadCrumb\/> que renderiza breadcrumbs na p\u00e1gina, como no exemplo abaixo:<\/p>\n

      Home<\/strong><\/em> \u2192 Streetwear<\/strong><\/em> \u2192 Bermudas<\/strong><\/em> \u2192 Bermudas Nike<\/strong><\/em><\/p>\n

      Na plataforma VTEX, eles t\u00eam algo chamado ‘controle de breadcrumb’<\/b>, que ajuda a mostrar onde voc\u00ea est\u00e1 no site. Por exemplo, se voc\u00ea est\u00e1 procurando bermudas Nike, o breadcrumb mostra que voc\u00ea est\u00e1 no departamento de ‘Streetwear’ e pode ajud\u00e1-lo a encontrar outras coisas relacionadas a beb\u00eas.<\/p>\n

      3. Ajudando P\u00fablico E Buscadores Com Uma URL Amig\u00e1vel<\/h2>\n

      Uma URL \u00e9 o endere\u00e7o da web de uma p\u00e1gina, <\/b>como o endere\u00e7o de uma casa na internet, que voc\u00ea insere no navegador para acessar um site espec\u00edfico.<\/p>\n

      Ter uma URL amig\u00e1vel \u00e9 importante para o seu site porque ajuda os visitantes a entenderem o que podem encontrar em uma p\u00e1gina<\/b>, o que reduz a chance de eles sa\u00edrem rapidamente.<\/p>\n

      Compare uma URL complicada, como https:\/\/www.lojadeskate.com.br\/Roupas%s\/nao28561\/66633, com uma amig\u00e1vel, como ‘https:\/\/www.lojadeskate.com.br\/roupas\/cal\u00e7ados\/all-star. A \u00faltima \u00e9 bem mais compreens\u00edvel, certo?<\/p>\n

      Felizmente, se a estrutura do seu site estiver bem organizada, como na plataforma VTEX, as URLs amig\u00e1veis s\u00e3o criadas automaticamente com base nas categorias. Por exemplo, https:\/\/www.lojadeskate.com.br\/departamento\/categoria\/subcategoria<\/em>. O nome da categoria posto ainda no cadastro reflete na URL. Por isso, \u00e9 importante n\u00e3o usar caracteres de pontos, v\u00edrgulas, acentos, letras mai\u00fasculas e etc\u2026.<\/p>\n

      No entanto, para as URLs de produtos, voc\u00ea precisar\u00e1 cri\u00e1-las manualmente na plataforma, seguindo algumas regras simples, como substituir espa\u00e7os por hifens e evitar caracteres especiais. No fim, a URL vai virar algo como https:\/\/www.lojadeskate.com.br\/produto-abc\/q.<\/p>\n

      Em resumo, URLs amig\u00e1veis s\u00e3o uma parte importante para que seu site seja mais f\u00e1cil de usar e confi\u00e1vel para seus visitantes. Isso torna a experi\u00eancia do comprador muito melhor, pois ele sabe o que esperar ao clicar em um link.<\/p>\n

      4. Placeholder: Adicione Conte\u00fado Ao Seu Site Sem Entender de Programa\u00e7\u00e3o<\/h2>\n

      Em um site, \u00e9 importante ter informa\u00e7\u00f5es tanto para aparecer bem no Google quanto para ajudar os visitantes. Uma possibilidade \u00e9 colocar blocos de texto nas p\u00e1ginas de categorias e departamentos para explicar mais sobre o que est\u00e1 l\u00e1<\/strong>. Isso \u00e9 essencial para ter uma boa classifica\u00e7\u00e3o na SERP Google, especialmente em sites da VTEX. Para fazer isso, voc\u00ea precisa usar um c\u00f3digo especial chamado ‘placeholder’, que \u00e9 como um espa\u00e7o reservado para o conte\u00fado.<\/p>\n

      Na vers\u00e3o IO, o desenvolvedor que criou a loja pode deixar os campos definidos e prontos para receber o conte\u00fado atrav\u00e9s do Site Editor. O cliente n\u00e3o precisar mais saber programar, apenas criar o conte\u00fado. Ap\u00f3s criado, ele ir\u00e1 usar os campos j\u00e1 pr\u00e9-definidos para adicionar esse conte\u00fado, como se estivesse usando um bloco de notas.<\/p>\n

      \u00c9 importante lembrar que para cada parte de texto em uma p\u00e1gina, voc\u00ea usa um ‘placeholder’ diferente.<\/b><\/p>\n

      5. Passo-a-passo: Inserindo Conte\u00fado em Categorias e Departamentos<\/h2>\n

      Organizadas categorias e departamentos do seu com\u00e9rcio eletr\u00f4nico para receber informa\u00e7\u00f5es adicionais, vamos adicionar \u00e0 plataforma esses conte\u00fados. Deixaremos um v\u00eddeo tutorial, ensinando o passo a passo completo para realizar essa tarefa:<\/p>\n