Favicon e nome do site após mudanças do Google
São Paulo. SEOLANDIA. Após uma série de testes, o bloco de resultados do Google em dispositivos móveis vai mesmo ter uma partezinha bem parecida com o cabeçalho de uma publicação no Instagram ou no Tweeter.
São Paulo. SEOLANDIA. Após uma série de testes, o bloco de resultados do Google em dispositivos móveis vai mesmo ter uma parte bem parecida com o cabeçalho de uma publicação no Instagram ou no Tweeter.
O anúncio foi feito quase 10 dias depois dos testes terem sido notados em várias partes do mundo, inclusive aqui no Br.
Sabe quando você publica algo no Instagram com uma trilha sonora ou uma localização, e essa informação fica embaixo do nome do seu perfil com uma fonte menor, tudo isso ao lado da imagem circular.
Os novos blocos de resultado das buscas do Google em dispositivos móveis vão ter uma disposição de elementos bem parecidos.
No lugar onde o Instagram ou Tweeter colocam o nome do perfil, vai ficar o nome do seu site.
No lugar onde o Instagram deixa o nome da música da publicação ou a localização da foto, ou, no caso do Tweeter, o botão para seguir, vai ficar a url do seu site.
Isso tudo, claro, bem ao lado da imagem circular, que no caso do seu site, vem por meio do "favicon".
A partir disso, tudo como antes: entram título - as vezes reescrito - e descrição da página.
São apenas duas coisas, dessa forma, que você deve se preocupar se quiser aproveitar essa mudança dar uma repagina no seu bloco de resultados:
- nome do site;
- favicon.
Nome do site
Url, título, descrição e provavelmente o favicon são ítens que a maior parte dos sites da internet já possuem. Então a parte mais embaraçosa é o nome do site. É aqui que está a grande novidade.
O Google pega o nome de um site de diversas maneiras e o processo é todo automatizado.
Como toda automação, podem acontecer erros de interpretação. Vou mostrar como faz, e não se assuste com os códigos. São mais simples do parecem.
Voltando ao nome do site, para você controlar isso melhor e fazer o Google entender direitinho qual o nome do seu site, as duas maneiras mais eficientes e precisas são (1) por meio da tag Open Graph, no caso uma simples tag que você coloca no <head> do documento html com a seguinte sintaxe:
<html> <head> <title>Exemplo: Um Site Sobre Exemplos</title> <meta property="og:site_name" content="o nome do seu site"> </head> <body> </body> </html>
Outra forma, é (2) por meio de dados estruturados, que também deve ficar na tag <head> do documento.
<html> <head> <title>Exemplo: Um Site sobre Exemplo</title> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "WebSite", "name" : "Nome do seu site", "url" : "https://url-do-seu-site.com/" } </script> </head> <body> </body> </html>
Favicon
Você provavelmente já deve ter isso no seu site... É aquele ícone do seu site que aparece em vários lugares, por exemplo:
Na aba dos navegadores...
Numa nova janela do Firefox...
Numa nova janela do Safari..
Numa nova janela do Safari no Mobile
E cabe aqui um ponto de atenção em relação à essa imagem chamada "favicon" - abreviação para "favorite icon", ou ícone favorito.
Essa imagem (ou "essas") pode te ajudar a ter mais cliques uma vez que pode fazer o seu resultado se destacar com um bom contraste de cores.
"Essa" ou "essas"
"Essa" se a extensão for ".ICO", um formato criado pela Microsoft que usa um único arquivo e que se auto-dimensiona.
"Essas" se se a extensão for .PNG, .JPG, etc...
O tamanho dos arquivos para cada um desses navegadores acima varia. O Google adota as mesmas normas que o Android. Portanto, as imagens precisam ter tamanho múltiplo de 48px.
Mas existem ferramentas que além de fazerem um diagnóstico da situação dos seus ícones favoritos, criam eles para você. A mais bacana que eu encontrei foi a Real Favicon Generator .
E assim ficou a revisão dos favicons da SEOLANDIA depois de usar o Real Favicon Generator.
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon/favicon-16x16.png"> <link rel="manifest" href="/static/images/favicon/site.webmanifest"> <link rel="mask-icon" href="/static/images/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
Ufa!
E lembre-se que, tão importante quanto revisar o seu "favicon" é checar como o nome do seu site está sendo fornecido ao Google.
Bons cliques!