Código do OG Open Graph do Facebook para adicionar no WordPress

Existem váarios plugins de SEO e de compartilhamento de redes sociais que fazem mil e uma coisas. Tem tambem vários outros plugins que também adicionam o og nas meta tags.

OG=Open Graph. São dados no código do site que redes sociais como facebook, instagram, twitter e mídias como o WhatsApp, telegram, etc usam para exibir informações como nome, resumo e imagem de destaque de um link que você cola na plataforma.

Como existem plugins e plugins, muitos tem 200 funcionalidades, e a maioria você não quer; ou ele tem várias configurações complicadas… e por eu ter conhecimento em html, css e php, muitas vezes prefiro buscar o código para inserir diretamente no tema. Assim o site fica mais leve e o SEO agradece.

Pois bem, pesquisando achei artigos muito bons, e o melhor deles deu um código que adaptei para o abaixo. Estava faltando os atributos de largura e altura da imagem para ficar perfeito, que adicionei.

Aqui o artigo, que ensina inclusive como usar o YOAST para fazer essa configuração (mas tive problemas, rs, então segui com a inserção do código bruto).
https://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/

Finalmente, o código bruto (mude o que estiver em negrito):

//Adicionando o Open Graph nos atributos de idioma
function add_opengraph_doctype( $output ) {
return $output . ‘ xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”‘;
}
add_filter(‘language_attributes’, ‘add_opengraph_doctype’);

//Informações para adicionar nas metas do Open Graph:

function insert_fb_in_head() {
global $post;
if ( !is_singular()) //se não for post ou página
return;
echo ‘<meta property=”fb:app_id” content=”ID do seu App Facebook caso tenha” />’;
echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’;
echo ‘<meta property=”og:type” content=”article”/>’;
echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;
echo ‘<meta property=”og:site_name” content=”Nome do Site“/>’;
if(!has_post_thumbnail( $post->ID )) { //se o seu post não tiver uma imagem destaque definida, insira aqui a URL da imagem a substituí-la.
$default_image=”http://exemplo.com/imagem.jpg“; //substitua aqui a URL da imagem
echo ‘<meta property=”og:image” content=”‘ . $default_image . ‘”/>’;
echo ‘<meta property=”og:image:width” content=”Número da largura da imagem“/>’;
echo ‘<meta property=”og:image:height” content=”Número da altura da imagem“/>’;
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );
echo ‘<meta property=”og:image” content=”‘ . esc_attr( $thumbnail_src[0] ) . ‘”/>’;
echo ‘<meta property=”og:image:width” content=”‘ . esc_attr( $thumbnail_src[1] ) . ‘”/>’;
echo ‘<meta property=”og:image:height” content=”‘ . esc_attr( $thumbnail_src[2] ) . ‘”/>’;
}
echo ”
“;
}
add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );

Adicione-o no functions.php via Editor no Menu Aparência do painel WordPress.

Adicionar no functions.php é uma questão de organização, para centralizar lá as funções extras.

Ele funcionará especificamente para páginas e posts, ok?

Não imagino outra contraindicação para inserí-lo diretamente no header.php junto com as outras meta tags, se for mais facilmente recordado ali e por algum motivo você precisar ficar voltando neste código.

 

Para já facilitar a sua vida, segue link do depurador de compartilhamento do facebook para você inserir uma URL do site que inseriu o código e já validar se stá tudo correto no funcionamento das suas novas og tags inseridas na unha:
https://developers.facebook.com/tools/debug/

E caso precise alterar algo relacionado à forma de puxar a imagem para a minitaura, aqui a documentação oficial do WordPress, o codex:

wp_get_attachment_image_src()

Estou colocando esses links todos também porque um dos motivos de eu escrever snippets no meu blog, é facilitar a minha própria vida quando estiver precisando usá-lo novamente. ;p

Um conhecimento que sempre me foi útil, foi o de saber html, css, php e WordPress.

E é bem sabido que conhecimento em programação é algo extremamente útil para o futuro das coisas…

Um viva pros programadores e desenvolvedores. \o/

O uso correto do atributo HTML alt nas imagens

Muitas vezes quem trabalha com SEO (Search Engine Optimization) sabe que o atributo HTML alt é importante na tag “img”, de imagem. Além disso, ela também é importante para melhorar a usabilidade de um web site. Sabia que usá-lo de forma desordenada ou excessiva é prejudicial em se tratando da acessibilidade do site a cegos?

Para que serve o HTML ALT

ALT vem de “alternate” do inglês. Ou seja, é uma alternativa ao conteúdo que está sendo exibido na imagem.

Ele serve para:

  1. Descrever em texto uma orientação sobre a imagem que não está sendo exibida;
  2. Sistemas de busca entenderem do que ela se trata e isso auxiliar a indexar a página;
  3. Leitores de tela em áudio especificarem do que ela se trata (isso inclui ferramentas que cegos usam para navegar na web — Caso queira saber mais sobre leitores de tela de computador, recomendo que veja este artigo “6 leitores de tela para seu computador”.)

Exemplo

Fiz uma assinatura de e-mail responsiva para um cliente, usando imagens + texto. Veja ela com as imagens aparecendo normalmente:

Agora, veja como ela aparece quando as imagens não são carregadas, por um problema no servidor, bloqueio de imagem, falta de conexão à internet etc:

Para que a informação do nome não fosse perdida na assinatura do e-mail, inseri o texto “Dr. Paulo Cezar Maldonado” no alt da imagem que exibe o nome dele. Assim, o nome dele como texto alternativo, é exibido na ausência da imagem e também pode ser interpretado por programas leitores de tela.

Embora o tamanho de algumas imagens seja pequena e não dê para ler o alt delas, programas leitores de tela em voz configurados para isso, leriam “Dr. Paulo Cezar Maldonado” com ou sem um problema de exibição da imagem .

Também, em um site, o Google indexaria a página para aparecer em buscas por “Dr. Paulo Cezar Maldonado”, o que auxiliaria no SEO.

Note que propositalmente não coloquei um alt no símbolo da marca à esquerda.
Por quê? Ele é desnecessário.

Você acharia relevante ouvir uma descrição dizendo “marca” ou mesmo indexar essa palavra em uma página na web?

Isso nos leva ao próximo tópico.

Como usar corretamente o ALT em imagens

Todas as imagens devem ter um atributo alt declarado. Isso é indicado semanticamente pelo HTML e para melhorar a usabilidade dos usuários dos leitores digitais em áudio. Mas IMPORTANTE: Declarar um atributo é diferente de preenchê-lo.

Exemplos de um HTML de imagem:

Exemplo 1 (Certo!): Com alt declarado e preenchido de vazio

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ />

Exemplo 2 (Certo!): Com alt declarado e preenchido

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” />

Exemplo 3 (ERRADO):  Com alt declarado, mas nulo

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” />

Exemplo 4 (ERRADO): Sem alt declarado

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” />

Entenda por que declarar o alt preenchido de vazio

Leia esse trecho de uma palestra (2) sobre acessibilidade para cegos nas páginas web:

O atributo de imagem “ALT” tem de ser utilizado com bom senso e a partir da seguinte idéia: tudo que for escrito nele será ouvido a toda hora que o leitor de tela passar por ele. Dessa forma, imagens que não tenham função, que só sirvam de decoração na tela, como imagens de linhas horizontais, bolinhas e quadradinhos decorativos e coloridos, enquadramentos, deverão vir com o “ALT vazio”, ou seja, com um espaço entre as aspas. Isso é diferente do “ALT nulo”, que é um alt com “”, ou seja, sem espaço entre as aspas. Como o nome já diz, o “alt nulo” é como se não existisse alt e o “alt vazio” é um alt com conteúdo, porém vazio.

Essa pequena diferença altera a leitura que o leitor de tela faz. Com o “alt vazio ele não lê absolutamente nada, enquanto com ele nulo alguns leitores procuram ler o conteúdo do atributo src, ou seja, tentam ler o nome da imagem.

Fonte: Como Fazer Acessibilidade nas páginas da WEB., Marco Antonio de Queiroz – MAQ, 29/08/2002 http://www.bengalalegal.com/acesso

Quando preencher o atributo HTML alt de texto

Se todos os itens abaixo forem verdadeiros no seu caso, preencha o atributo alt da imagem com uma descrição curta e clara do que ela representa:

  1. Não é um ornamento meramente estético
  2. A ausência da imagem faz o conteúdo ficar menos compreensível e completo
  3. A imagem contém um texto que está unicamente nela (neste caso, o ideal é você transcrever resumidamente o texto pra dentro do alt)

Caso não sejam os casos acima, lembre de sempre declarar o atributo HTML alt preenchido com um espaço vazio, assim:

alt=” “

Dica: Destaque todas as imagens sem o HTML alt!

Ricardo Sanches publicou um vídeo com código para automaticamente colocar bordas vermelhas nas imagens sem alt e você lembrar de declará-las no HTML! Veja:

Referências

  1. “HTML <img> alt Attribute” (em inglês) https://www.w3schools.com/tags/att_img_alt.asp
  2. “Como Fazer Acessibilidade nas páginas da WEB” http://www.bengalalegal.com/acesso
  3. “Você nunca mais vai esquecer do ALT” https://www.portalgsti.com.br/2018/01/voce-nunca-mais-vai-esquecer-do-alt.html

Dr. Paulo Cezar Maldonado – Site Responsivo

O site do médico homeopata Dr. Paulo Cezar Maldonado objetiva ser principalmente fonte de informação para seus pacientes. Para isso foi proposta e desenvolvida a área Textos e Artigos contextualizadas em um Blog, que também foi adotado como área para divulgação de Novidades e das Entrevistas participadas.

Também foi considerado que o site deve ser uma fonte de informação a seu respeito – o que originou a área Sobre Mim. Ela e a aplicação de técnicas de SEO visam tornar o site mais facilmente encontrado por usuários que lhe buscam diretamente ou que procuram temas relacionados a seu trabalho em buscadores como o Google.

Como facilitador aos seus pacientes, o site também informa a respeito da disponibilidade de dias, locais e horários de atendimento no menu Consultórios.

Para agregar ainda mais valor ao trabalho do Dr. Paulo, foi desenvolvida também uma área dinâmica de envio de Depoimentos que está integrada ao WordPress.

Minhas competências principais envolvidas neste projeto, foram:

  • Planejamento: Fui responsável pela proposta de conteúdo do site, seu escopo detalhado com pesquisa e análise de similares, definição da estrutura de navegação, avaliação do contexto simbólico do cliente, seu público e formas de melhor alcançá-lo;
  • Design: Desenvolvimento da arquitetura da informação, conceito gráfico, estudo de cores, elementos gráficos, tipografia etc e sua aplicação conjunta no layout;
  • Programação: Front-end e back-end com HTML5, CSS3, PHP, sistemas e configuração do WordPress baseado em template responsivo existente.

Contei neste projeto também com a participação de Larissa Seixas para o aperfeiçoamento do conteúdo para a web.

Acesse o site no seu smartphone, tablet e computador e veja como ele se comporta (por possuir responsive webdesign): http://paulocezarmaldonado.com.br

Zaru Gestão Empresarial – Redesign do site

O projeto consistiu em realizar um novo layout para o site com WordPress da Zaru Gestão Empresarial respeitando a mesma estrutura e programação existentes do site, objetivando transmitir visualmente o posicionamento da cliente. Modernidade, clareza, praticidade, objetividade, foram levadas em consideração a fim de facilitar a navegação e tornar o ambiente mais “clean” e propício para compartilhar informações e promover um ambiente sinérgico e atrativo para troca de conteúdo com seu público.

As competências principais envolvidas neste projeto, foram:

  • Projeto de redesign: Pesquisa e análise de referências de sites do segmento e do público-alvo, concepção e desdobramento respeitando os limites da estrutura existente do site;
  • Desenvolvimento web: Para aplicar o novo layout, realizei desenvolvimento em HTML & CSS3 e configurações/backup/realocação do WordPress.

Confira o novo site em: http://zaru.com.br

Tivoli Ecoresidences Praia do Forte – Site Responsivo

O projeto consistiu em a criação de um novo site, pois o antigo possuía apenas versão desktop e muita seções, sem muita clareza e resultado no principal objetivo que é a venda das casas do Tivoli Ecoresidences, em Praia do Forte/BA.

Meu trabalho consistiu em:

  • Planejamento: mapear os problemas do antigo site e propor um novo site, também com uma nova arquitetura de informação. Fui responsável pela confecção do escopo detalhado do projeto e definição de estratégias para que o site passasse a cumprir seu objetivo. Um dos levantamentos foi que ~10% dos visitantes eram estrangeiros, por isso propomos e fizemos um novo site bilíngue.
  • Gerenciamento: garantir o cumprimento do cronograma, das estratégias levantadas no planejamento, intermediação e controle de qualidade nas etapas de layout e programação.
  • Programação: Participei do desenvolvimento front-end do site, trabalhando em paralelo a outro programador com o uso da ferramenta de versionamento GIT. Trabalhei com Bootstrap, HTML e CSS.

Acesse o site no seu smartphone, tablet e computador e veja como ele se comporta (por possuir responsive webdesign): http://tivoliecoresidencespraiadoforte.com