Com a proliferação dos dispositivos de alta resolução, o SVG é, definitivamente, o futuro das telas de altas resoluções quando se trata de imagens responsivas, pois conta com um arquivo muito pequeno e um consumo de banda muito baixo.
De fato, alguns sites que nós entramos diariamente como o Google, YouTube, Twitter já estão usando o SVG. e, com a tendência de aumento no uso dos SVGs, terão cada vez mais webmasters mudando das PNGs para SVGs, por que, sério, como não amar o SVG? Menos trabalho, uma imagem de alta performance, que favorece o usuário e também a empresa!
Mas, ainda não encontramos muitos artigos na internet sobre SEO para SVG, e foi isso que nos motivou a escreve esse texto, pra responder essas 3 questões:
- O SVG será indexado na pesquisa do Google Imagens?
- Qual a melhor forma de aplicar o SVG para o SEO e o que temos que ter em mente quando usamos?
- Qual a forma mais simples de tornar suas imagens SVG otimizadas para os motores de busca?
Sabendo que o Google Imagens por si só é o segundo maior motor de busca no ranking, logo após do próprio Google, temos em mãos uma grande gama de oportunidades para você impulsionar a visibilidade da sua marca simplesmente trabalhando da forma mais correta, e isso tudo SEM custo algum!
Se você é um webmaster, desenvolvedor front-end ou designer, esse artigo é essencial pra você, porque, se equipando com o conhecimento de como-fazer para otimizar suas imagens para motores de busca, você estará adquirindo uma vantagem competitiva, e estará pronto para o futuro dos recursos gráficos – o SVG.
Antes de continuar lendo, você deverá saber quais são os métodos disponíveis para exibir imagens em SVG no seu site, como a tag de imagem (<img>), tag <object>, svg inline etc. Se você não sabe, eu recomendo que você pegue uma boa ideia através desse post aqui: The Best Way to Embbed SVG.
Então, vamos lá!
A forma mais simples e rápida: use tags de imagem com os bons e velhos atributos alt e title.
Pra adicionar um SVG no seu site, você usar o mesmo processo que para adicionar imagens em PNGs e JPGs, com a tag <img> e atributos src, title e alt, dessa forma:
<img src="https://cloud-spanner.svg" alt="Cloud Spanner icon in PNG, SVG, JPG formats" title="Cloud Spanner" />
E então, a imagem será mostrada nos resultados de pesquisas no Google Imagens com o formato SVG sem falhas:
Prós: suportado por todos os navegadores, sem problemas de segurança, simples, rápido e com cache ativo!
Contras: suas fontes no SVG podem não aparecer da forma que você esperava (embora você possa resolver isso usando o Nano), e você não consegue animar ou fazer qualquer outra interação com a imagem.
Essa é pra quem quer interação e SEO juntos: Use a tag Object com Fallback
Se você está usando SVG no seu site com interação ou animação, as únicas opções disponíveis são a tag object ou o SVG INLINE. Com a tag object, o robô do Google Imagens não vai reconhecer o seu SVG como uma imagem, o que faz total sentido para um motor de busca. Após algumas rodadas de teste, descobrimos que para indexar suas imagens no Google Imagens, você tem que adicionar um fallback para a sua imagem, da seguinte forma:
<object type="image/svg+xml" data="your_image.svg">
<img src="your_image.svg" alt="This is your image alt" title="Your image title tag">
</object>
Inserir o link da imagem no seu sitemap para acelerar o processo de indexação
Nós testamos este método no site Radica Software, e já estava mostrando perfeitamente no Google Imagens alguns poucos dias após as alterações terem sido feitas!
A única preocupação usando este método é o carreamento duplo – o navegador carregará a imagem duas vezes. Mas você pode salvar as imagens em cache, marcar esses arquivos como “cacheáveis” no seu site, e então, o navegador passará a carregar as imagens a partir do cache. Mas, mesmo assim, o carregamento duplo ainda acontecerá.
Prós: Interação (scripts e css ativos), cache, compressão gzip.
Contras: ameaças de segurança em potencial, precisa de um fallback para o Google Imagem conseguir indexar, duplo carregamento.
Para aqueles que estão usando SVG Inline
Se você está usando SVG Inline no seu website para recursos gráficos, nós recomendamos que você pule para as duas opções acima já abordadas e largue o SVG Inline – tags <img> e <object> ao invés dele. Nós fizemos experimentos usando <noscript> no nosso SVG Inline.
<noscript> <img src="/images/burger-menu.fbe818ad3c.svg" alt="Burger Menu" title="Burger Menu SVG"> </noscript>
E nós tentamos adicionar o SVG como uma tag <img> com titulo e descrição dentro do nosso SVG Inline.
<svg role="img" aria-label="Google Fonts Vecta" xmlns="http://www.w3.org/2000/svg"><title>Google Fonts Vecta</title><desc>Embed fonts using Vecta</desc></svg>
Mas isso não apareceu no Google Image mesmo depois de 1 mês após a atualização dos sitemaps. Baseado na nossa experiência passada, normalmente levaria 3-7 dias para indexar a imagem, considerando que usamos o mesmo site.
Conclusão
Atualmente enquanto escrevo, recomendo que você use as tags <img> como uma opção mais simples e as tags <object> apenas se você precisar de interação com as suas imagens. Evite o SVG Inline se quiser ser indexado no Google Imagens.
Eu espero que este artigo torne isso mais fácil para você decidir entre usar PNG ou SVG para o seu site, e como tornar o seu SVG otimizado para motores de busca, então você poderá trazer isso a torna na sua equipe e discutir mais sobre o assunto.
Traduzido de: Vecta.io.
