Categorias
WordPress

Finalmente Gutenberg

No começo de dezembro de 2018 foi lançada a versão 5.0 do WordPress, posso falar de longe essa foi a versão mais controversa que eu já vi durante esses 10 anos que acompanho a plataforma. O ponto em questão foi o editor Gutenberg um update que muda toda a forma de se trabalhar com conteúdo dentro do WordPress. 

A nova forma de gerenciamento de conteúdo, vem com grandes mudanças devido a necessidade simples: evolução da plataforma, esse trabalho vem sendo realizado durante 2 anos, diversos testes e updates foram feitos. O projeto já venho acompanhando desde 2017, mas fiquei curioso para ver como seria a aceitação no twitter muitas e o resultado foi muitas pessoas reclamaram sobre o novo update. Um resumo do que eu vi durante essa semana foi:

1 – “comunidade” não foi ouvida

Muitas das reclamações no twitter foram que o update foi feito sem eles ouvirem a comunidade, se você esta mesmo engajado na comunidade, você deve ter ouvido falar do projeto Gutenberg a dois anos atrás, no último WordCamp US um dos temas chaves foi o Gutenberg, chats sobre updates eram realizados eram realizados. A resposta sim a comunidade foi ouvida. Muitas pessoas não sabem onde participar, isso é normal, outras só lembram do forum quando a coisa da ruim. Mas caso você queira participar: Meetups, WordCamps, Slack, forum são as formas oficiais de participar da comunidade. Twitter e facebook não são canais oficiais mas como o Mat Mullenweg falou no último WordCamp US comentários relevantes foram lidos nessas plataformas.

2 – Voce não é a maioria

Muito complicado quando entramos numa bolha pensamos que todo o mundo está no mesmo nível técnico que nós. Nos primeiros minutos da apresentação do Matt Mullenweg mostrou testes com usuários tentando colocar uma imagem ao lado de um texto, pode ser uma simples tarefa para você que sabe HTML e WP. Mas os testes mostram quão complexo é para um simples usuário e isso corresponde a +90% da internet. As principais mudanças do Gutenberg focam nesse grupo que mantem a plataforma.

3 – Acomodação

O conceitos de blocos é algo que afeta diretamente o ecossistema, está visível para todos os usuários diferente de uma REST API que funciona por trás das cortinas, um cliente normalmente não vai pedir uma REST API, Gutenberg vai estar lá para o usuário final vai ser comum clientes começarem a pedir blocos customizados. Aprender Gutenberg vai passar a ser algo relevante, mas a palavra aprender pode ser motivante para alguns devs e extremamente frustrante para outros. Uma pequena parte desse grupo que não gosta de atualizações, simplesmente lutam contra e fazem bastante barulho parecendo um grupo ainda maior. Dois anos atrás Matt veio na apresentação e disse estudem JavaScript e hoje o Gutenberg está ai com uma série de novas tecnologias que precisamos dominar, Dois pontos chave React e JavaScript e outras secundárias como EcmaScript 6, babel e Webpack. Já estão aparecendo soluções para simplificar nossa vida mas considero extremamente importante você ter uma base nessas tecnologias.

4 – Uma estrela não é contribuição

Uma chuva de reviews negativos no Gutenberg plugin, mas esse plugin foi diponibilizado para teste, essa era ideia os usuários testarem identificarem problemas. Era esperado que o plugin apresentasse algum erro, o usuário reportava a issue para ser corrigida. Marcar com uma estrela o plugin sem nenhum feedback não ajuda a plataforma. 

5 – Está tudo bem, você pode usar o editor clássico

O Gutenberg está ai mas você não é obrigado a utilizar, o desespero de muitos usuário poderia se resolvido com um simples clique para instalar o editor clássico novamente. O editor clássico não morreu vai estar disponível por mais dois anos. Gutenberg não está 100% tem muito para evoluir, esse update é um shift que vai revolucionar a plataforma, muita coisa ainda não está clara até o Matt Mullenweg, mencionou em sua palestra no WordCamp US, no decorrer do ano muita coisa vai ser definida, não por ele mas pela comunidade, como será feita a adoção, como os usuários irão reagir as mudanças.

A fase dois do Gutenberg já foi definido: https://make.wordpress.org/core/2018/10/05/gutenberg-phase-2-leads/

Caso queira acompanhar os updates do Gutenberg só manter o plugin instalado, as novas features serão criadas na versão do editor como plugin: https://wordpress.org/plugins/gutenberg/

Categorias
Web WordPress

Trabalhando com shortcodes no WordPress

Vamos falar sobre shortcode nesse post, mas antes vou contar uma história para vocês. Semana passada me deparei com um problemas, daqueles que você só enxerga em produção. Desenvolvendo um tema para um freela, tudo ok no ambiente de teste. Quando o site foi para produção nenhum vídeo carregava.

Entrei para verificar o conteúdo, nele tinha uma tag video.

quando bati o olho pensei duas coisas ou é um shortcode antigo ou é algo do jetpack. Primeiro passo, verificar os plugins se estão ativos, em seguida atualizar o WP, por fim atualizar o Jetpack. Resultado nada!

Você faz aquele exercício o que foi que eu fiz antes “desabilitei o tema anterior” quando fui olhar o código do tema antigo estava lá o shortcode video. Shortcode é um recurso muito útil para que está criando um tema ou plugin. Mas se está criando um short code para o tema ele deve ser totalmente vinculado ao tema, ou seja, um recurso que só faça sentido existir naquele tema ou plugin.

Exemplo, a tag vídeo estava presente em todos os posts mudou o tema, quebrou todo o site. Para alguns recursos hoje em dia não faz muito sentido, um caso é o youtube basta colar o link da url no editor visual que o WP já cria um embed. Optar por um recurso do WP independente do tem ou plugin a funcionalidade vai estar lá.

Ok, vamos para a parte legal. Como eu crio um shortcode?

Primeiro temos que adicionar em nosso function.php o seguinte hook:

add_shortcode( $tag , $func );

Ele espera dois parâmetros, nome da tag e a função que ele irá chamar na prática ele vai ficar da seguinte forma:

<?php  

function say_hello($atts) {
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

Exemplo acima criamos o shortcode “hello” quando a shortcode api encontrar a tag [hello] dentro do meu post saberá que tem que chamar a função say_hello, basicamente ela cria um html como o texto olá meu nome é “x”. Notem que concateno com um valor que passamos como parâmetro na função.

Ela espera que passamos um atributo nome, por exemplo, [hello nome="ze"]. Mas se caso o usuário não passar o valor o que vai acontecer ? ZICA!

Mas podemos definir um atributo default para resolver este problema:

<?php
function say_hello($atts) {
	$atts = shortcode_atts( array(
				'nome' => 'zezinho'
			), $atts, 'hello' );
	return '<p> Olá meu nome é'.$atts['nome'].'</p> ';
}

add_shortcode('hello', 'say_hello');
?>

No caso usei um exemplo simples só montar um texto p. Mas poderíamos montar um componente de share, um componente de sugestão de produtos, o componente de publicidade. Lembrando que o recurso fica atrelado ao tema ou plugin, quer saber mais? Também adicionei uma versão em português no codex do WordPress: https://codex.wordpress.org/pt-br:Function_Reference/add_shortcode

Categorias
Geral

Otimização de imagens para SEO

Quando estava preparando a palestra para o WordCamp BH, na minha palestra do “Marketplace ao WordPress” um dos pontos da palestra foi a otimização de imagens para SEO. Dei uma lida em alguns posts do Yoast, um deles foi um post sobre otimizar imagens em seu site, que até usei como referência da minha palestra.

Uma ótima opção para ajudar no entendimento do nosso conteúdo, descrever um determinado produto ou explicar um fluxo de uma operação. Temos um ditado “Uma imagem vale mais que mil palavras”. Não poderia ser diferente para que gera conteúdo web e nos itens a seguir vou listar alguns cuidados especiais para melhorar o SEO do seu conteúdo utilizando imagens, está lista é uma adaptação do post: http://yoast.com/image-seo/

Achando a imagem correta

Se você tem a oportunidade de adicionar uma imagem, por favor faça. Suas páginas precisam de imagens, inicialmente seu post precisa de imagens que remetam ao artigo. Se você usa imagem somente para otimizar as métricas de plugin de SEO, você está fazendo errado “meu parça”, a imagem deve refletir o tópico do post.

Existe uma simples razão para isso: uma imagem que é cercada por conteúdo relacionado “rankeia” melhor seu conteúdo. Adicionamos imagens ao nosso conteúdo pelas seguintes razões:

  • Elas enfatizam o título ou o assunto do post
  • Ela vai atrair um visitante para ler o post, sem ele ver o texto
  • As imagens serão usadas por redes sociais como: Facebook e Twitter

Se você não tem como usar fotos do seu próprio conteúdo, existem várias fontes de conteúdo com licença Creative Commons, por exemplo, Flicker outra ferramenta que podemos utilizar é freeimages.com. Mas tome cuidado fique longe das chamadas obvious stock photos, produzir suas próprias imagens tornam o conteúdo mais original.

Outro tipo de imagem que é bem popular hoje são os gifs, podemos utilizar a sequencia de imagens para demonstrar um passo-a-passo, ou uma cena curta. Um portal bastante conhecido começou a utilizar gif’s nas chamadas das matérias um momento chave de um acidente ou fato inusitado, estamos falando do globo.com, alguns gifs entraram até na home do canal de esportes.

Preparando a imagem para uso no seu artigo

Quando você imagem correta o próximo passo será otimizar a imagem para isso temos que levar em conta as seguintes considerações:

Escolha o nome correto para imagem

O inicio para otimizar uma imagem para SEO é dar o nome correto para o arquivo, uma forma de ganhar tráfego organico é  adicionando ao nome do arquivo o que a foto remete, nada de subir imagens no post com o nome DSC938293829.jpg, o formato ideal seria  museu-louvre-paris.jpg.

Escale sua imagem

Será que você realmente precisa realizar o upload de imagens com 2500×1800 pixels por exemplo? Na maioria dos casos a resposta é NÃO. Tempo de carregamento é um fator importante para a experiência do usuário e SEO, quanto mais rápido o site carrega mais fácil torna-se a visita do usuário, Outro fator importante são os usuários mobile, eles não possuem uma experiência totalmente imersiva em relação aos usuários desktop, segundo no carregamento da página são cruciais para você não perde-lo. E o uso de imagens corretas ajudam no tempo de carregamento, muitas vezes em alguns sites e blogs as imagens são os principais gargalos da velocidade de carregamento do site.

Otimize o tamanho do arquivo

Além de utilizar a escala a imagem no tamanho correto, podemos reduzir ainda mais os kb’s de nossas imagens sem ficar longe do resultado original. Primeiro passo é reduzir EXIF data de nossas imagens, também podemos utilizar ferramentas como ImageOptim ou sites como JPEGmini ou PunyPNG.

Podemos analizar o desempenho de nossas imagens com ferramentas como YSlow e PageSpeed Test.

Adicionando a imagem ao nosso artigo

Depois das etapas de otimização da imagem, vamos adicionar nossa imagem ao conteúdo. Primeiramente o conteúdo deve estar situado em um parágrafo que remete a imagem, a imagem deve fazer parte do contexto.

Legendas

As legendas das imagens devem ser um conteúdo que complementa a imagem, Porque isso é importante para o SEO da imagem? Pessoas usam um texto para “scannear” o artigo, depois dos cabeçalhos elas olham para as legendas das imagens como um scanner. Nilsen em 1997 escreveu em sua pesquisa fala sobre os elementos que melhoram a leitura do texto, cabeçalhos, fonts largas, texto em negrito, texto destacados, listas, gráficos e legendas. Em 2012 uma pesquisa publicada pela KissMetric, fala que legendas das imagens são lidas 300% a mais que o corpo dos textos, por isso não usa-las ou fazer o mau uso delas, significa jogar fora uma grande oportunidade de engajar os leitores.

Propriedades Alt e title

O texto alt é adicionado para criar uma um texto alternativo descritivo da imagem, quando por alguma razão o conteúdo não pode ser exibido para usuário como também por questões de acessibilidade, tenha certeza que os possua alguma keyword de SEO em seu conteúdo e relação ao conteúdo do post.

Quando você estaciona o mouse sobre a imagem O IE mostra o conteúdo do alt já o chrome exibe o conteúdo do title. “O atributo title é muito importante mas não é um modo seguro de exibir alguma informação crucial. Em vez disso, ele oferece um modo de fornecer informações não essenciais, por exemplo, o humor da imagem, ou que isso significa no contexto.” É bom ter a informação mas isso não é levado em conta para SEO da imagem.

OpenGraph

Use a imagem correta no HEAD do seu HTML com a meta tags do facebook “og:image”, isto irá garantir que estará usando a imagem correta nas interações com o facebook o openGraph também é usado para o Pinterest. O plugin do Yoast possui uma seção de social onde você pode definir que imagem será usada. A qualidade da imagem será importante, quanto maior a qualidade mais fácil será para estas ferramentas trabalharem com sua imagem, para verificar como o Facebook está lendo seu site pode utilizar o Facebook Debugger. O Plugin do Yoast também dá suporte aos cards do Twitter.

sitemap.xml de imagens

Se você é um desenvolvedor web, você pode se perguntar sobre sitemaps para imagens, o Google é bastante claro sobre isso:

“Para dar ao Google informações sobre as imagens em seu site você vai precisar adicionar tags específicas de imagem a um sitemap. Você pode listar separadamente as imagens, ou você pode adicionar a um sitemap já existente. Use o método que funciona melhor para você.”

O plugin do Yoast não gera um sitemap para imagens, mas em seus posts eles adicionam no sitemap do post a lista de imagens presentes, adicionar imagens ao sitemap ajudo o google indexar suas imagens facilmente.

Resumo

SEO para imagens é uma soma de uma série de elementos, o Google cada dia está reconhecendo melhor estes elementos nas imagens, faz sentido garantir que imagem e todos os elementos apresentados contribuem na experiência do usuário, então tome nota disso para entregar uma experiência melhor e não apenas tentar rankear melhor no Google.

Tome nota dos seguintes pontos

  • Use imagens relevantes ao texto
  • Aplique o nome correto a imagem
  • Tenha certeza que está utilizado as dimensões corretas das imagens
  • Otimize suas imagens
  • Adicione legenda a suas imagens
  • Use alt, o title é opcional
  • Adicione OpenGraph e Twitter Card
  • Use imagens no seu XML sitemap