Mensagem # 1 | 1:08 PM 2014-10-06

Acredito que alguns de vocês ao usar a Barra de redes sociais, ao compartilhar nas redes sociais viram deformidades, detre elas:
1. a imagem aparecia errada, ou simplesmente não aparecia
2. o título da postagem ficava errada e com informações irrelevantes
3. não aparecia a descrição


A solução é que o webmaster do seu site deve usar as metatags especiais. Você pode encontrar toda a documentação para as meta tags e como usa-las nesses links:


Reunindo todas as principais meta tags de todas as documentações de forma genérica chegamos as estas. Se estiver interessado de saber mais sobre as meta tags abaixo, dê uma olhada das documentações acima.

Código

<html itemscope itemtype="http://schema.org/Product">

<!-- Por favor coloque estas tags entre / aninhada na tag <head></head> no seu site -->
<title>Título da página. Máximo 60-70 caracteres</title>
<meta name="description" content="Descrição da página. Não mais que 155 caracteres." />

<!-- Marcação Google para autor e publicador-->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]"/>

<!-- Marcações Schema.org para Google+ -->
<meta itemprop="name" content="O nome ou título da página">
<meta itemprop="description" content="Descrição da página">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Marcações para Twitter Card -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@pagina_que_publicou">
<meta name="twitter:title" content="O nome ou título da página">
<meta name="twitter:description" content="Descrição da página. Não utrapassar 200 caracteres.">
<meta name="twitter:creator" content="@autor_que_publicou">
<meta name="twitter:image" content="http://www.example.com/imagem.jpeg">

<!-- Marcações Open Graph / Facebook -->
<meta property="og:title" content="Título aqui" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/imagem.jpeg" />
<meta property="og:description" content="Descrição aqui" />
<meta property="og:site_name" content="Nome do site, ex.: uCoz" />


Copie o código acima e vamos criar um bloco global com o nome de CABECALHO e colocar o código nele e edite com as informações necessárias.


Agora copie a variável (ou constante) $GLOBAL_CABECALHO$ e vamos para a ferramenta Substituição rápida.
Não substituição vamos encontrar os caracteres </title> e substituir por </title>$GLOBAL_CABECALHO$.
A partir do Bloco global você pode configurar as meta tags das páginas com facilidade.


Agora é necessário você verificar se todas as configurações estão funcionando, para isso é necessário acessar o validador da rede social e testar o link do seu site.

Twitter Validation Tool — https://dev.twitter.com/docs/cards/validation/validator
Facebook Debugger — https://developers.facebook.com/tools/debug
Google Structured Data Testing Tool — http://www.google.com/webmasters/tools/richsnippets
Pinterest Rich Pins Validator — http://developers.pinterest.com/rich_pins/validator/


Tem como eu automatizar as metatags para não precisar adicionar página por página?
Sim! Tem como. Se você estiver interessado, você apenas deve se preocupar em apenas 3 tipos de páginas: a página inicial, as categorias (e seções) e por último, as postagens.
A página inicial por ser estática, assim como as categorias, que são poucas, você tem que adicionar as configurações manualmente.
Já a página das postagens elas podem ser 100% dinâmicas usando variáveis do sistema como $SITE_NAME$ , $HOME_PAGE_LINK$, $IMAGE_URL1$. No formulário crie um campo para meta tag description e keywords.


Estas meta tags são usadas em sites como http://brcraft.ucoz.com.br/ e http://bestapps.ucoz.com.br/
Anexos: 4097047.png (84.1 Kb) · 1335011.png (160.2 Kb)
Lembre-se! Não estamos na sua cabeça, então seja claro ao postar uma dúvida.
Não dou suporte por mensagem privada. Quem preferir suporte particular, procure no Painel de Controle do site ou na página http://www.ucoz.com.br/contact.