Nos últimos meses eu estava irritada porque os summary cards de todos os meus blogs do Blogger pararam de funcionar no Twitter. Isso dava mais trabalho na hora de divulgar porque eu também tinha que subir uma imagem para o post no Twitter aparecer devidamente ilustrado.
Você sabe que o card (ou summary card) está funcionando quando você posta o link e o Twitter reconhece título, texto, imagem e incorpora tudo abaixo do que você escreve.
Como exemplo, esse é um tuíte sem card:
E esse é um tuíte com card:
Bem mais completo com o card, né?
Nada me tira da cabeça que foi um boicote do Twitter ao Blogger: primeiro porque antes funcionava, depois porque os cards continuaram funcionando em outras redes sociais como Facebook, WhatsApp e Tumblr. Mas discutir essa teoria não interessa agora. Depois de dois dias fazendo muitos testes, esse é o código que está funcionando nos meus blogs:
<!-- começo dos cards do Twitter -->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATHUnMpjK2B0L49wh3dULgBJ13nWCz0XDx_yyZiZ6dbp_2MYMmBoeFqd7XFgGCRfuTqT4F3HxBug0re6H1PL60oXw-gKa60ZVXQDZ6Xo35ExxSnN05FEiGdcEfTj2JhcrsvbU_QYR7KU/s680/crianca-flor.jpg' name='twitter:image:src'/>
<meta expr:content='data:blog.pageName'
name='twitter:title'/>
<meta content='@resenhaperfume'
name='twitter:site'/>
<meta content='@helenfernanda'
name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl'
name='twitter:domain'/>
<meta content='Resenha Perfume: dicas e resenhas da @HelenFernanda'
name='twitter:text:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.postImageUrl'
name='twitter:image:src'/>
<meta expr:content='data:blog.pageName'
name='twitter:text:title'/>
</b:if>
<!-- fim dos cards do Twitter -->
Como são meta tags, você tem que colocar abaixo de <head> e acima de </head>.
As partes destacadas você personaliza com informações do seu blog.
Depois de modificar e salvar, você testa no site Card Validator: cards-dev.twitter.com/validator. Sugiro testar com o endereço da página inicial e também com permalinks de posts específicos.
Código comentado
Para fazer modificações com segurança, é melhor saber o que faz cada meta tag:
<!-- começo dos cards do Twitter -->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Formato do card. A outra opção é "summary", que mostra a imagem alinhada à esquerda do texto. -->
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATHUnMpjK2B0L49wh3dULgBJ13nWCz0XDx_yyZiZ6dbp_2MYMmBoeFqd7XFgGCRfuTqT4F3HxBug0re6H1PL60oXw-gKa60ZVXQDZ6Xo35ExxSnN05FEiGdcEfTj2JhcrsvbU_QYR7KU/s680/crianca-flor.jpg' name='twitter:image:src'/>
<!-- Imagem que será exibida quando o link não for de um post específico. Coloque a URL da logo ou outra imagem relacionada ao tema do seu site. -->
<meta expr:content='data:blog.pageName'
name='twitter:title'/>
<!-- Título da página no card. -->
<meta content='@resenhaperfume'
name='twitter:site'/>
<!-- Arroba do site no Twitter. Não aparece no card. -->
<meta content='@helenfernanda'
name='twitter:creator'/>
<!-- Arroba do autor no Twitter. Não aparece no card. -->
<meta expr:content='data:blog.homepageUrl'
name='twitter:domain'/>
<!-- Página inicial do site. Não aparece no card. -->
<meta content='Resenha Perfume: dicas e resenhas da @HelenFernanda'
name='twitter:text:title'/>
<!-- Título alternativo. Vai aparecer no card quando não se tratar de um post. -->
<b:if cond='data:blog.pageType == "item"'>
<!-- Essa parte do código se refere apenas a posts. -->
<meta expr:content='data:blog.postImageUrl'
name='twitter:image:src'/>
<!-- A primeira imagem do post vai aparecer no card. -->
<meta expr:content='data:blog.pageName'
name='twitter:text:title'/>
<!-- O título do post vai aparecer no card. -->
</b:if>
<!-- fim dos cards do Twitter -->
Os cards não funcionam nos links que o Blogger classifica como não "buscáveis". É o caso de qualquer página de busca interna e também dos permalinks das categorias (labels). Se quiser mudar isso, é preciso um conhecimento mais avançado para configurar o arquivo robots.txt.
E lembrando o que citei no início: esse é o código que está funcionando nos meus blogs. Talvez você precise fazer personalizações para que funcione no seu site, já que também precisei fazer muitas mudanças para que funcionasse nos meus.
Até mais!
Fontes: Summary Card | Twitter, Claudia Rosa e Axlmulat.
Legal!
ResponderExcluirhttps://tecnoinfobrr.blogspot.com
Oi, tava muito precisando disso e testei no meu blog, mas só funcionava quando clikava o botão de compartilhar. Fora isso tudo aparecia em formato de links. Então fiz varias tentativas e modificações com a ajuda do seu post e cheguei nesse código que funcionou > (Aqui) agora é só colocar qualquer link que gera um card sem precisar clikar no "compartilhar". Obg. Deixei seus créditos no post, por ter me ajudado.
ResponderExcluirQue bom que funcionou! 😁
Excluir