Seu carrinho está vazio no momento!

Olá, meus queridos alunos e futuras lendas do e-commerce! 👋 Sejam muito bem-vindos à nossa Aula 53!
Depois de mergulharmos fundo na criação, personalização e otimização de uma loja Shopify, chegou a hora de subir mais um nível e garantir que todo esse trabalho seja visto pelo Google e por outros motores de busca. Hoje, vamos desvendar os segredos do SEO Técnico Avançado para Shopify, transformando sua loja em uma máquina de ranqueamento! 🚀
Eu sou seu professor experiente, com mais de uma década no campo de batalha do Shopify, e estou aqui para guiá-los por cada detalhe. Preparados para dominar o Google? Então, vamos nessa! 💪
—
Aula 53 – Loja Shopify do Zero ao Avançado: SEO técnico avançado para dominar o Google
📚 O que você vai aprender nesta aula
Nesta aula crucial, você vai adquirir conhecimentos e habilidades para:
- Compreender a importância do SEO técnico para o ranqueamento e visibilidade da sua loja Shopify.
- Dominar o uso de Robots.txt e Sitemaps XML no contexto Shopify.
- Implementar e entender as Canonical Tags para evitar conteúdo duplicado.
- Aplicar tags
noindexenofollowde forma estratégica em páginas específicas. - Adicionar e otimizar Dados Estruturados (Schema Markup) via JSON-LD em sua loja Shopify, focando em
Product,BreadcrumbeOrganization. - Aprofundar a Otimização de Velocidade (Core Web Vitals) com foco em aspectos técnicos como imagens WebP, lazy loading e minificação de ativos.
- Entender a gestão de Redirecionamentos 301 e a estrutura de URLs para SEO.
- Utilizar o Google Search Console para monitorar a saúde técnica do seu SEO.
- Aplicar as melhores práticas de SEO técnico para garantir que o Google entenda, indexe e ranqueie sua loja da melhor forma possível.
🔗 Conectando com aulas anteriores
Lembram-se de quando começamos a falar sobre SEO básico? Naquelas aulas, abordamos a importância de títulos e descrições meta otimizados, uso de palavras-chave, otimização de URLs amigáveis e o uso de alt text para imagens – tudo isso diretamente pelo painel administrativo do Shopify. 🏷️
Também exploramos a estrutura de temas e arquivos .liquid nas aulas de desenvolvimento de temas. Pois bem, hoje vamos pegar essa base e mergulhar fundo nos arquivos do seu tema para implementar melhorias que vão além do que o painel administrativo oferece. A compreensão da estrutura de pastas e arquivos Liquid será essencial, assim como seus conhecimentos de HTML para identificar onde inserir os códigos. É a união do SEO com o desenvolvimento! 🤝
A otimização de imagens e a velocidade de carregamento, que tocamos em aulas de performance, agora serão vistas sob a lente do SEO técnico e das Core Web Vitals, indicadores cruciais que o Google usa para avaliar a experiência do usuário. Tudo se conecta!
📖 Conteúdo Principal
O SEO técnico é a base invisível que sustenta todo o seu esforço de SEO. Ele garante que os robôs dos motores de busca consigam rastrear (crawl), indexar (index) e entender (rank) o conteúdo da sua loja de forma eficiente. Sem uma boa base técnica, mesmo o melhor conteúdo e as melhores palavras-chave podem não performar como esperado.
1. Crawlability e Indexability: A Fundação 🤖
a) Robots.txt: O Porteiro da sua Loja
O arquivo robots.txt informa aos robôs dos motores de busca quais páginas ou seções do seu site eles podem ou não rastrear. Em Shopify, o arquivo robots.txt é gerado automaticamente e não pode ser editado diretamente por nós.
O que o Shopify faz por padrão?
O Shopify automaticamente impede o rastreamento de certas URLs de função, como o carrinho (/cart), checkout (/checkout), páginas de busca internas (/search), entre outras que não agregam valor aos resultados de busca.
Você pode acessá-lo digitando seudominio.com.br/robots.txt.
Exemplo de um robots.txt padrão do Shopify:
User-agent: *
Disallow: /admin
Disallow: /cart
Disallow: /orders
Disallow: /checkouts
Disallow: /checkout
Disallow: /59030807/checkouts
Disallow: /59030807/orders
Disallow: /carts
Disallow: /account
Disallow: /collections//products/.json
Disallow: /collections/?sort_by
Disallow: /collections/+sort_by
Disallow: /blogs/*/feed
Disallow: /*/comments
Disallow: /search
Disallow: /apps/proxy
Disallow: /predictive_search
Allow: /products/*
Allow: /products/*.js
Allow: /collections/*
Allow: /collections/*.js
Allow: /blogs/*
Allow: /blogs/*.js
Allow: /pages/*
Allow: /pages/*.js
Sitemap: https://seudominio.com.br/sitemap.xml
Dica do Professor: Embora você não possa editar o robots.txt diretamente, você pode controlar o índice de certas páginas usando meta tags noindex, que veremos a seguir. Isso é útil para filtrar coleções ou páginas de tags que você não quer que apareçam nos resultados de busca.
b) Sitemaps XML: O Mapa do Tesouro para o Google 🗺️
O sitemap.xml é um arquivo que lista todas as URLs importantes do seu site que você quer que os motores de busca rastreiem e indexem. Ele serve como um mapa para o Google.
Assim como o robots.txt, o Shopify gera e atualiza automaticamente seu sitemap.xml. Ele inclui automaticamente:
- Todas as páginas de produtos.
- Todas as páginas de coleções.
- Todas as páginas de blogs e artigos.
- Todas as páginas estáticas (criadas em “Páginas”).
Você pode acessá-lo em seudominio.com.br/sitemap.xml. Ele geralmente aponta para outros sitemaps menores (ex: sitemap_products_1.xml, sitemap_collections_1.xml).
Ação Importante: Após criar sua loja e sempre que fizer grandes mudanças (muitos produtos novos, etc.), é crucial enviar seu sitemap.xml ao Google Search Console. Isso garante que o Google saiba sobre todas as suas páginas.
2. Canonical Tags: Diga adeus à Duplicação de Conteúdo 👋
Conteúdo duplicado é um problema sério para SEO. O Google pode ter dificuldade em determinar qual versão de uma página é a “original” ou a “preferida”, diluindo a autoridade entre elas. A canonical tag () resolve isso.
Ela é uma meta tag HTML que informa aos motores de busca qual é a versão “canônica” (preferida) de uma página quando existem várias URLs com conteúdo semelhante ou idêntico.
Como o Shopify lida com isso?
O Shopify é excelente em gerenciar canonical tags automaticamente. Por exemplo:
-
seudominio.com.br/collections/todos-os-produtos/products/meu-produto -
seudominio.com.br/products/meu-produto
Ambas as URLs apontam para o mesmo produto. O Shopify automaticamente adicionará uma canonical tag na primeira URL (/collections/...) apontando para a segunda (/products/...), indicando que esta é a versão preferida para indexação.
Onde verificar?
Abra qualquer página da sua loja no navegador, clique com o botão direito, selecione “Ver código-fonte da página” e procure por na seção .
Dica do Professor: É raro precisar modificar as canonical tags em Shopify, mas se você estiver usando filtros de coleção ou parâmetros de URL complexos que criam URLs únicas para conteúdo idêntico (ex: /collections/roupas?color=red), certifique-se de que a canonical tag esteja apontando para a URL da coleção base (/collections/roupas). O Shopify geralmente cuida disso, mas é bom verificar.
3. Meta Tags noindex e nofollow: Controle Avançado 🛑
Essas meta tags oferecem controle mais granular sobre como os motores de busca interagem com suas páginas e links.
a) noindex: Não Indexe esta Página
A tag noindex informa aos motores de busca para não incluir uma página nos resultados de busca. É útil para:
- Páginas de “Obrigado” após uma compra.
- Páginas de login ou conta de usuário.
- Páginas de políticas internas (a menos que você queira que sejam encontradas).
- Páginas de filtros de coleção com pouco valor de busca que podem criar duplicação excessiva.
Como implementar noindex em Shopify:
Você precisará editar o arquivo theme.liquid ou templates específicos.
1. Acessar o Editor de Código do Tema: No admin Shopify, vá em “Loja Virtual” > “Temas” > “Ações” > “Editar código”.
2. Modificar theme.liquid:
Procure pela seção do seu theme.liquid. Você pode adicionar uma condicional Liquid para aplicar a tag noindex a tipos específicos de páginas.
Exemplo: Aplicar noindex a todas as páginas de “Obrigado” (thank you page):
...
{% if template contains 'customers/thank_you' %}
{% endif %}
...
Exemplo: Aplicar noindex a uma coleção específica (ex: coleção “interna-testes”)
...
{% if collection.handle == 'interna-testes' %}
{% endif %}
...
Você pode usar template.name ou template.suffix para páginas personalizadas, ou handle para produtos/coleções/blogs/páginas específicas.
Cuidado: Use o noindex com moderação. Indexar suas páginas de produtos e coleções é fundamental!
b) nofollow: Não Siga este Link
A tag nofollow é usada dentro de links individuais ( tags) ou como uma meta tag em nível de página. Ela informa aos motores de busca para não passar “link juice” (autoridade de SEO) para o destino do link e para não rastrear esse link.
Usos comuns:
- Links para sites de terceiros que você não endossa totalmente.
- Links em comentários de blog (para combater spam).
- Links para conteúdo gerado pelo usuário.
Como implementar nofollow:
Para links individuais, adicione rel="nofollow" diretamente na tag :
html
Para aplicar nofollow a todos os links de uma página (o que é raro e geralmente não recomendado), você pode usar uma meta tag robots na seção :
...
...
Isso geralmente é combinado com noindex (ex: content="noindex, nofollow").
4. Structured Data (Schema Markup): Falando a Linguagem do Google 🗣️
Dados estruturados são códigos (geralmente em formato JSON-LD) que você adiciona ao seu site para ajudar os motores de busca a entenderem o conteúdo das suas páginas de forma mais clara. Isso pode levar a Rich Snippets (resultados de busca aprimorados, como estrelas de avaliação, preços, estoque) que aumentam a visibilidade e a taxa de cliques (CTR).
Formatos: JSON-LD é o recomendado pelo Google e o mais fácil de implementar em Shopify.
a) Schema Product (Produto) 🛒
Essencial para suas páginas de produto. Informa ao Google detalhes como nome do produto, descrição, preço, moeda, imagem, avaliações, estoque e SKU.
Onde implementar: No arquivo de template do seu produto (ex: sections/product-template.liquid ou templates/product.liquid).
Exemplo Prático (JSON-LD para Product Schema):
Vamos adicionar isso ao seu arquivo de template de produto. Procure pela section ou template principal do produto, geralmente algo como sections/main-product.liquid ou templates/product.liquid.
{% comment %}
Schema Markup para Produto (JSON-LD)
Melhora a exibição nos resultados de busca com Rich Snippets
{% endcomment %}
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ product.url | absolute_url | json }},
"image": [
{% for image in product.images %}
{{ image.src | img_url: '1024x1024' | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
],
"description": {{ product.description | strip_html | json }},
"sku": {{ product.selected_or_first_available_variant.sku | default: product.selected_or_first_available_variant.id | json }},
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": {
"@type": "Offer",
"priceCurrency": {{ shop.currency | json }},
"price": {{ product.selected_or_first_available_variant.price | divided_by: 100.0 | json }},
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/{% if product.selected_or_first_available_variant.available %}InStock{% else %}OutOfStock{% endif %}",
"url": {{ product.selected_or_first_available_variant.url | absolute_url | json }}
},
{% if product.metafields.reviews.rating.value %}
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": {{ product.metafields.reviews.rating.value | first | json }},
"reviewCount": {{ product.metafields.reviews.rating.value | last | json }}
},
{% endif %}
"mpn": {{ product.selected_or_first_available_variant.barcode | default: '' | json }}
}
Observações:
-
product.metafields.reviews.rating.value: Este campo assume que você está usando um app de avaliações que armazena os dados de rating em um metafield específico. Você pode precisar ajustar o caminho do metafield (reviews.rating.value) dependendo do seu app. Se não tiver um app de avaliações, você pode remover esse bloco. -
skuempn: Adaptamos para pegar SKU e código de barras (MPN). Se não houver, ele será vazio. - Atenção: Coloque este código dentro do
{% schema %}e{% endschema %}da sua section Liquid para que ele seja processado corretamente e não apareça no conteúdo da página. Ou, se for um template puro, pode ir direto. O ideal é que esteja noHEADou próximo ao conteúdo principal, mas invisível para o usuário.
b) Schema BreadcrumbList (Migalhas de Pão) 🍞
As “migalhas de pão” mostram a hierarquia da página dentro do site. O schema BreadcrumbList ajuda o Google a entender essa estrutura e pode exibi-la nos resultados de busca.
Onde implementar: Geralmente no sections/header.liquid ou sections/main-navigation.liquid, ou em theme.liquid (para ser global). O ideal é que esteja presente em todas as páginas onde as migalhas de pão são exibidas.
Exemplo Prático (JSON-LD para BreadcrumbList Schema):
Este é um pouco mais complexo, pois depende da profundidade da navegação. Adicione no theme.liquid ou onde sua navegação principal é carregada.
{% comment %}
Schema Markup para BreadcrumbList (JSON-LD)
Ajuda o Google a entender a hierarquia do seu site
{% endcomment %}
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
}
{% if collection %}
,{
"@type": "ListItem",
"position": 2,
"name": {{ collection.title | json }},
"item": "{{ collection.url | absolute_url }}"
}
{% endif %}
{% if product %}
{% if product.collections.first %}
,{
"@type": "ListItem",
"position": 2,
"name": {{ product.collections.first.title | json }},
"item": "{{ product.collections.first.url | absolute_url }}"
}
{% endif %}
,{
"@type": "ListItem",
"position": {% if product.collections.first %}3{% else %}2{% endif %},
"name": {{ product.title | json }},
"item": "{{ product.url | absolute_url }}"
}
{% elsif page and page.template_suffix != 'index' %}
,{
"@type": "ListItem",
"position": 2,
"name": {{ page.title | json }},
"item": "{{ page.url | absolute_url }}"
}
{% elsif blog %}
,{
"@type": "ListItem",
"position": 2,
"name": {{ blog.title | json }},
"item": "{{ blog.url | absolute_url }}"
}
{% if article %}
,{
"@type": "ListItem",
"position": 3,
"name": {{ article.title | json }},
"item": "{{ article.url | absolute_url }}"
}
{% endif %}
{% endif %}
]
}
Observações: Este código tenta criar breadcrumbs para home, coleção, produto, página e blog/artigo. Pode ser ajustado conforme a estrutura de navegação do seu tema.
c) Schema Organization (Organização) 🏢
Informa ao Google sobre sua empresa: nome, logo, URL, contatos, perfis de redes sociais. Ajuda o Google a associar sua marca a entidades do mundo real.
Onde implementar: No theme.liquid, dentro da tag , pois é global.
Exemplo Prático (JSON-LD para Organization Schema):
{% comment %}
Schema Markup para Organization (JSON-LD)
Informa ao Google sobre sua empresa e redes sociais
{% endcomment %}
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
"url": {{ shop.url | json }},
"logo": "{{ shop.url | append: shop.files.logo.src | img_url: 'master' }}", {# Ajuste o caminho da imagem do logo se necessário #}
"sameAs": [
"https://facebook.com/seuperfil", {# Substitua pelo seu Facebook #}
"https://instagram.com/seuperfil", {# Substitua pelo seu Instagram #}
"https://twitter.com/seuperfil" {# Substitua pelo seu Twitter/X #}
{# Adicione outros perfis de redes sociais aqui #}
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "{{ shop.phone | default: '+55XXYYYYYYYYY' }}", {# Seu telefone de contato #}
"contactType": "Sales",
"areaServed": "BR",
"availableLanguage": "Portuguese"
}
}
Observações:
- A URL do logo (
shop.files.logo.src) pode variar dependendo de como você faz upload do logo. Certifique-se de que a URL gerada seja válida. Uma maneira robusta é fazer o upload do logo paraConteúdo > Arquivosno admin e usar a URL direta, ou configurar via personalizador de tema. - Lembre-se de substituir os URLs das redes sociais e o telefone pelos seus dados reais!
d) Ferramenta de Teste de Dados Estruturados do Google
Sempre que implementar ou modificar dados estruturados, use o validador do Google:
🔗 Rich Results Test: https://search.google.com/test/rich-results
Ele mostrará se o seu código JSON-LD está correto e quais Rich Snippets ele pode gerar.
5. Otimização de Velocidade (Core Web Vitals): Performance é Ranqueamento ⚡
A velocidade do site é um fator de ranqueamento crucial. O Google usa as Core Web Vitals para medir a experiência do usuário. Em aulas anteriores, abordamos otimização básica de performance. Agora, vamos aprofundar:
- Largest Contentful Paint (LCP): Tempo que leva para o maior elemento de conteúdo visível na tela ser renderizado.
- First Input Delay (FID): Tempo que leva para o site responder à primeira interação do usuário (clique, digitação).
- Cumulative Layout Shift (CLS): Mede a estabilidade visual da página (evitar mudanças inesperadas no layout).
Como otimizar tecnicamente em Shopify:
a) Otimização de Imagens Avançada: WebP e Lazy Loading
- WebP: É um formato de imagem moderno que oferece compressão superior a JPEG e PNG.
Shopify por padrão: O Shopify serve imagens em WebP automaticamente* para navegadores compatíveis (Chrome, Firefox, Edge, Safari mais recentes), se a imagem original for PNG ou JPEG. Você não precisa fazer nada manual para isso!
- **O que você pode fazer:** Garantir que todas as imagens enviadas sejam de boa qualidade, mas em tamanhos razoáveis, e que o tema use as URLs de imagem responsivas do Liquid (
img_url).
- Lazy Loading (Carregamento Preguiçoso): Imagens fora da tela inicial só são carregadas quando o usuário rola a página para baixo.
- Shopify por padrão: Muitos temas modernos do Shopify já implementam lazy loading para imagens fora da viewport, usando o atributo
loading="lazy"no HTML da tag. - Verificação: Inspecione o código de suas imagens (fora da primeira dobra) e procure por
. - Implementação manual (se seu tema não tiver): Você pode adicionar
loading="lazy"a todas as tagsem seus arquivos.liquid.
Exemplo (em snippets/product-card.liquid ou similar):
alt="{{ product.featured_image.alt | escape }}"
loading="lazy"
width="{{ product.featured_image.width }}"
height="{{ product.featured_image.height }}">
Dica: Também é crucial definir width e height para evitar CLS (Cumulative Layout Shift)!
b) Minificação e Combinação de Ativos (CSS e JS)
- Minificação: Remove caracteres desnecessários (espaços, quebras de linha, comentários) dos arquivos CSS e JavaScript, reduzindo seus tamanhos.
- Combinação: Junta múltiplos arquivos CSS/JS em um único, reduzindo o número de requisições HTTP.
- Shopify por padrão: O Shopify faz uma parte desse trabalho automaticamente em seu CDN (Content Delivery Network).
- **O que você pode fazer:**
- Ao desenvolver um tema customizado ou modificar um existente, evite adicionar muitos arquivos JS/CSS externos.
- Sempre que possível, use o que o Shopify oferece ou apps otimizados que cuidam disso.
- Apps de otimização de velocidade podem ajudar a minificar e combinar ativos que seu tema ou outros apps adicionem.
c) Remova Conteúdo e Apps Desnecessários
Cada app e cada pedaço de código adicionado ao seu tema pode impactar a velocidade.
- Revise seus apps: Desinstale apps que você não usa mais. Muitos deixam “resquícios” de código no seu tema.
- Limpe seu código: Remova snippets Liquid, CSS ou JS que não são mais utilizados.
6. Redirecionamentos 301 e Estrutura de URLs 🔄
a) Redirecionamentos 301 (Permanent Redirect)
Quando você muda a URL de uma página, exclui um produto ou renomeia uma coleção, a URL antiga pode gerar um erro 404 (página não encontrada). Isso é ruim para o SEO. Os redirecionamentos 301 informam aos motores de busca que a página se moveu permanentemente para uma nova URL, transferindo a autoridade da URL antiga para a nova.
Como gerenciar em Shopify:
1. Automaticamente: Se você mudar o handle de um produto, coleção ou página diretamente no admin Shopify, ele geralmente cria um redirecionamento 301 automaticamente.
2. Manualmente: Para URLs excluídas ou mudanças mais complexas, você pode criar redirecionamentos manualmente:
- No admin Shopify, vá em “Loja Virtual” > “Navegação” > “Ver redirecionamentos de URL”.
- Clique em “Criar redirecionamento de URL”.
- Preencha “URL antiga” e “URL nova”.
Melhores Práticas:
- Sempre use 301 para mudanças permanentes.
- Verifique periodicamente seus erros 404 no Google Search Console e crie redirecionamentos para URLs populares que sumiram.
b) Estrutura de URLs Amigáveis
Já abordamos isso nas aulas básicas, mas é importante reforçar: URLs curtas, descritivas e com palavras-chave são melhores para SEO e para o usuário.
Exemplo:
- Bom:
seudominio.com.br/products/camiseta-estampada-algodao - Ruim:
seudominio.com.br/collections/12345/products/prod001?variant=6789
O Shopify é bom nisso por padrão, mas ao criar handles de produtos, coleções e páginas, pense sempre na clareza e nas palavras-chave.
7. Monitoramento com Google Search Console (GSC) 📊
O GSC é uma ferramenta indispensável para qualquer estrategista de SEO. Ele permite que você:
- Envie seu sitemap.
- Monitore a saúde de indexação do seu site (quais páginas foram indexadas, quais têm erros).
- Verifique relatórios de Core Web Vitals.
- Veja quais palavras-chave estão trazendo tráfego e para quais páginas.
- Identifique erros (404, problemas de segurança, dados estruturados inválidos).
Configuração:
1. Crie uma conta Google (se já não tiver).
2. Acesse https://search.google.com/search-console.
3. Adicione sua propriedade (site) e verifique-a. O método mais fácil para Shopify geralmente é via tag HTML que você adiciona ao theme.liquid.
4. Envie seu sitemap.xml.
Dica do Professor: Use o GSC regularmente! É o seu “check-up” de SEO. Se algo estiver errado com sua indexação ou Core Web Vitals, o GSC será o primeiro a te avisar.
💻 Exemplos Práticos
Vamos recapitular e ver como aplicar alguns desses conceitos.
Exemplo 1: Adicionando Schema Product em um Tema Dawn
1. No admin Shopify, vá em “Loja Virtual” > “Temas”.
2. Encontre seu tema atual (Dawn, por exemplo), clique em “Ações” > “Editar código”.
3. No navegador de arquivos, procure por sections/main-product.liquid (este é o arquivo principal que renderiza a seção do produto em temas como o Dawn).
4. Role para baixo ou procure por uma área que se encaixe para adicionar seu script JSON-LD. Geralmente, colocamos no final do arquivo, antes do {% schema %} (se houver), ou em um snippet dedicado que é incluído. O mais comum é ter um script de schema existente ou adicioná-lo. Se não existir, você pode adicionar o código do Schema Product que vimos na seção 4a.
{% comment %}
Schema Markup para Produto (JSON-LD)
{% endcomment %}
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ product.url | absolute_url | json }},
"image": [
{% for image in product.images %}
{{ image.src | img_url: '1024x1024' | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
],
"description": {{ product.description | strip_html | json }},
"sku": {{ product.selected_or_first_available_variant.sku | default: product.selected_or_first_available_variant.id | json }},
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": {
"@type": "Offer",
"priceCurrency": {{ shop.currency | json }},
"price": {{ product.selected_or_first_available_variant.price | divided_by: 100.0 | json }},
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/{% if product.selected_or_first_available_variant.available %}InStock{% else %}OutOfStock{% endif %}",
"url": {{ product.selected_or_first_available_variant.url | absolute_url | json }}
},
{% comment %}
Ajuste este bloco para seu app de avaliações, se houver
Exemplo para um metafield 'reviews.rating':
{% endcomment %}
{% if product.metafields.reviews.rating.value %}
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": {{ product.metafields.reviews.rating.value.rating | json }},
"reviewCount": {{ product.metafields.reviews.rating.value.count | json }}
},
{% endif %}
"mpn": {{ product.selected_or_first_available_variant.barcode | default: '' | json }}
}
5. Salve o arquivo.
6. Teste Imediatamente: Acesse a página de um produto da sua loja, copie a URL e cole no Rich Results Test do Google para validar.
(Simulação de Screenshot: Tela do Rich Results Test do Google, mostrando “Produto” com um visto verde e todos os campos preenchidos corretamente, com “Itens detectados” > “Produto” à esquerda e detalhes do JSON-LD à direita.)
Exemplo 2: Adicionando noindex a uma página específica
Suponha que você tenha uma página “interna” de testes (/pages/pagina-de-testes) que não deve ser indexada.
1. No admin Shopify, vá em “Loja Virtual” > “Temas” > “Ações” > “Editar código”.
2. Abra o arquivo theme.liquid.
3. Dentro da tag , adicione o seguinte código:
...
{% if page.handle == 'pagina-de-testes' %}
{% endif %}
...
4. Salve o arquivo.
5. Acesse a página de testes no navegador, veja o código-fonte e confirme a presença da tag .
(Simulação de Vídeo/GIF: Mostra a navegação no admin do Shopify para editar theme.liquid, inserir o código, salvar, e depois a navegação para a página de testes no navegador, abrindo o inspecionar elemento e mostrando a tag noindex no .)
🎯 Exercícios e Desafios
Chegou a hora de colocar a mão na massa!
1. Implementação de Schema Product:
- No seu tema de desenvolvimento, implemente o código JSON-LD para o Schema
Productem todas as suas páginas de produto (verifique se seu tema já não o tem e aprimore se necessário). - Use o Rich Results Test do Google para validar a implementação. Faça um screenshot dos resultados e salve-o.
2. Implementação de Schema Organization:
- Adicione o código JSON-LD para o Schema
Organizationno seutheme.liquid. - Lembre-se de substituir os placeholders com os dados reais da sua loja (nome, URL, logo, redes sociais, telefone).
- Valide no Rich Results Test.
3. Verificação de Canonical Tags:
- Escolha um produto que pertença a pelo menos uma coleção.
- Acesse a URL do produto através da coleção (ex:
seudominio.com.br/collections/sua-colecao/products/seu-produto). - Inspecione o código-fonte da página e identifique a
canonical tag. Ela deve apontar para a URL mais limpa do produto (ex:seudominio.com.br/products/seu-produto).
4. Configuração do Google Search Console:
- Se ainda não o fez, configure sua propriedade no Google Search Console para sua loja Shopify.
- Envie seu
sitemap.xmlatravés da interface do GSC. - Explore os relatórios de “Páginas” e “Core Web Vitals”.
5. Desafio Extra (Opcional): Otimização de Imagens para CLS:
- Inspecione as imagens em sua página inicial (ou em uma coleção). Verifique se elas possuem os atributos
widtheheightdefinidos no HTML. - Se não tiverem, tente adicionar esses atributos em um snippet ou seção responsável por renderizar as imagens, usando as propriedades do objeto
imagedo Liquid (image.width,image.height). Isso ajuda a evitar o CLS.
Compartilhem suas dúvidas e sucessos no nosso canal de comunicação! Quero ver essas lojas brilhando no Google! ✨
📝 Resumo da Aula
Ufa! Que aula intensa e cheia de informações valiosas! Cobrimos hoje:
- A importância do Robots.txt e Sitemaps XML para a comunicação com os motores de busca, e como o Shopify os gerencia automaticamente.
- O papel crucial das Canonical Tags para evitar duplicação de conteúdo, com o Shopify fornecendo uma excelente gestão padrão.
- Como usar
noindexenofollowpara controlar a indexação de páginas e o fluxo de link juice, e como implementá-los via Liquid. - A implementação de Dados Estruturados (Schema Markup) via JSON-LD para
Product,BreadcrumbListeOrganization, que são vitais para Rich Snippets e para o Google entender seu conteúdo. - Aprofundamos a Otimização de Velocidade focando em Core Web Vitals, WebP, Lazy Loading e a importância da minificação de ativos.
- A gestão estratégica de Redirecionamentos 301 e a criação de URLs amigáveis.
- A importância e o uso do Google Search Console como sua ferramenta principal de monitoramento técnico de SEO.
Lembrem-se, SEO técnico não é um “faça uma vez e esqueça”. É um processo contínuo de monitoramento e otimização. Ao aplicar o que aprendemos hoje, vocês estão construindo uma base sólida para o sucesso a longo prazo da sua loja no universo digital! 🌐
🚀 Preparação para próxima aula
Na próxima aula, vamos sair um pouco do código e mergulhar fundo nos Dados e Analytics Avançados para Shopify. Já que agora sua loja está tecnicamente otimizada para ser encontrada, precisamos saber quem está encontrando, como estão interagindo e o que podemos fazer para converter mais!
Vamos explorar:
- Configuração avançada do Google Analytics 4 (GA4) para e-commerce.
- Eventos e conversões personalizadas.
- Relatórios de funil de vendas e comportamento do cliente.
- Introdução à Otimização da Taxa de Conversão (CRO) e como usar dados para tomar decisões.
Preparem-se para analisar números e transformar insights em vendas! 📈
📚 Recursos Adicionais
- Documentação do Google sobre Rich Results Test: https://search.google.com/test/rich-results
- Central da Pesquisa Google (Guias de SEO): https://developers.google.com/search/docs/fundamentals/seo-start-guide?hl=pt-br
- Schema.org (Vocabulário de Dados Estruturados): https://schema.org/
- Guia Shopify sobre SEO: https://help.shopify.com/pt-BR/manual/online-store/seo/how-to-optimize-seo
- Google Search Console: https://search.google.com/search-console
- PageSpeed Insights (para Core Web Vitals): https://pagespeed.web.dev/
Até a próxima aula, e continuem construindo lojas incríveis! Sucesso! ✨