Categorias
PWA - Progressive web apps WordPress

Transformando seu site WordPress em uma PWA

Nesse post iremos ver como utilizar o plugin oficial do Google para converter seu site WordPress em uma Progressive Web App, atualmente temos uma série de plugins para converter seu site em uma PWA, os 3 principais plugins são:

Plugin PWA Google

Nesse post vamos focar no plugin mantido pelo time do Google e XWP. Esse plugin foi criado com a intenção de fazer parte do core do WordPress aos poucos, no ano passado o plugin foi utilizado no tema do WordCamp Europe Berlin. Pelo fato que o plugin tem como objetivo fazer parte do core uma vez instalado o plugin não ativa nenhum painel mas quando realizamos auditoria com Lighthouse temos o seguinte resultado:

Lighthouse usa um checklist para fazer a validação se nosso site como uma PWA

Lighthouse olha para três categorias:

  • Rápido e estável: Rápido carregamento e suporte a offline.
  • Instalável: Uso de HTTPS e uso de web app manifest
  • Otimizado: Configurações para barra de navegação customizada, design responsivo, conteúdo disponível sem a execução de JavaScript, inclusão de configuração para apple-touch-icon

O plugin gera web app manifest através da REST API uma vez que o plugin é ativado você pode conferir o endereço /wp-json/wp/v2/web-app-manifest.

Meu blog por exemplo:

{ "name": "Blog Fellyph Cintra", "start_url": "https:\/\/blog.fellyph.com.br\/", "display": "minimal-ui", "dir": "ltr", "lang": "pt-BR", "background_color": "#fafafa", "theme_color": "#fafafa", "description": "Blog sobre WordPress, JavaScript, HTML, CSS, eventos e algo mais", "icons": [ { "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n-192x192.jpg", "sizes": "192x192", "type": "image\/jpeg" }, { "src": "https:\/\/blog.fellyph.com.br\/wp-content\/uploads\/2018\/11\/cropped-1796698_795991100415208_12473649_n.jpg", "sizes": "512x512", "type": "image\/jpeg" } ] }

As propriedades são geradas da seguinte forma:

  • name: O título do site carregada pela função get_option(‘blogname’)
  • short_name: copia do site title com no máximo 12 caracteres
  • description: descrição do site get_option(‘blogdescription’)
  • lang: idioma do site get_bloginfo(‘language’)
  • start_url: home URL via get_home_url()
  • theme_color: background customizado via get_background_color()
  • background_color: também carregado pelo background customizado
  • display: por padrão é minimal-ui
  • icons: o ícone do site via get_site_icon_url()

Para a configuração completa sem modificação no código o título do site precisa ter menos de 12 caracteres, caso contrário precisamos customizar o nosso código, em outras palavras precisamos tocar no código. Weston criador do plugin PWA também criou um mini plugin para incluir essas informações sem código:

https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549

A Primeira vez que rodei a auditoria tive dois problemas, o primeiro era o título do menu site era maior que 12 caracteres e o segundo o ícone do meu site era inferior a 512px.

Primeira auditoria com lighthouse

Para resolver o problema do short_name inclui o plugin do Weston, ele inclui um campo extra no meu painel de configuração

Atributo short name

Após corrigir o problema com o short name o segundo problema foi referente aos ícones para isso precisamos adicionar uma PNG com mais de 512px como ícone de nossa aplicação no menu Personalizar > Identidade do site:

Atualizando ícone do site

Com o manifest.json corrigido temos a possibilidade de instalar o nosso site WordPress como na imagem a seguir:

Banner de instalação

Personalizando manifest.json

Lembrando que a ideia que esse plugin faça parte do core, muita coisa ainda pode mudar na versão de Julho de 2020 caso queiramos personalizar informações do manifest.json precisamos adicionar filtros(codificar) em nossa aplicação via tema com function.php ou criando um plugin:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['short_name'] = 'Shortness'; return $manifest; } );

Caso o seu tema não suporte ícones ou background personalizado precisamos incluir a informação, por exemplo, o theme_color:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['theme_color'] = '#0073AA'; return $manifest; } );

Versão Offline

Um dos recursos do plugin é a inclusão de template para usuários offline Erro 500, caso queira enviar uma mensagem personalizada para o usuário você pode incluir uma template com seguinte nome offline.php, 500.php ou error.php para uma mensagem mais genérica.

Versão offline padrão

Caso queira testar seu template você pode acessar o seguinte endereços:

  • https://your-site-name.com/?wp_error_template=offline;
  • https://your-site-name.com/?wp_error_template=500

Comentários Offline

Outro recurso do plugin é a possibilidade de comentários offline, o plugin utiliza Background Sync API para enviar os comentários quando o usuário recuperar a conexão.

Estratégias de Cache

O plugin utiliza WorkBox integrado com PHP para realizar abstração da implementação das estratégias de cache, para isso precisamos indicar extensões e rotas e quais estratégias serão implementadas:

  • Cache first
  • Stale while revalidate
  • Cache only
  • Network only

Para implementar estratégias de cache precisamos utilizar hooks e adiciona-los em nosso function.php

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) { $scripts->caching_routes()->register( '/wp-content/.*\.(?:png|gif|jpg|jpeg|svg|webp)(\?.*)?$', array( 'strategy' => WP_Service_Worker_Caching_Routes::STRATEGY_CACHE_FIRST, 'cacheName' => 'images', 'plugins' => array( 'expiration' => array( 'maxEntries' => 60, 'maxAgeSeconds' => 60 * 60 * 24, ), ), ) ); } );

No código acima adicionamos uma estratégia cache first a todas as imagens dentro da pasta \wp-content\.

add_action( 'wp_front_service_worker', function( \WP_Service_Worker_Scripts $scripts ) { $scripts->precaching_routes()->register( 'https://example.com/wp-content/themes/my-theme/my-theme-image.png', array( 'revision' => get_bloginfo( 'version' ), ) ); } );

No segundo exemplo acima realizamos precaching de uma image específica em nosso tema e vinculamos uma versão para manter em cache até o plugin atualizar a versão, mais informações na página do github plugin.

Conclusão

Caso faça parte do core do WordPress isso será uma grande adição para o core do WordPress, o uso de bibliotecas externas como Workbox pode adicionar mais complexidade na incorporação desse plugin, mas o plugin é uma alternativa rápida para implementação de recursos de uma Progressive web app em nossos sites WordPres.

Vantagens

  • Fácil integração com outros plugins do Google como AMP para WordPress e Site Kit.
  • Inclusão de template para versão offline.
  • Possiblidade de comentários offline
  • API para implementação de estratégias de cache
  • Geração automática de Web App Manifest

Desvantagens

  • Necessidade de codificação para alguns recursos
  • Ausência de um painel de personalização para determinadas informações
  • Nenhuma integração para service worker

Após as configurações adicionadas corretamente temos nosso site WordPress atingindo as três metas: Rápido, estável, instalável e otimizado.

Auditoria final

Para mais posts sobre PWA acesse a página da categoria.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugins WordPress não são tecnologias ou processos

Navegando pelo YouTube encontro muitos vídeos, plugin de performance WordPress, plugin de SEO WordPress e outros casos como AMP pode matar o seu projeto. Muitas vezes criam uma visão com dois cliques eu irei resolver todos os meus problemas, plugins WordPress ajudam na automatização de tarefas mas muitas vezes criamos essa visão que eles resolvem todos os nossos problemas ou representam uma tecnologia ou um processo.

Por exemplo SEO é um assunto muito complexo, temos ótimos plugins disponíveis, mas o fato de instalar um plugin de SEO não vai resolver todos os seus problemas referentes ao tema. Eles ajudam e otimizar a realização de tarefas, mas temos que implementar o SEO de nossa aplicação como, inclusão de meta informações, inclusão e otimização de palavra chave e manutenção.

Somente a inclusão do plugin sem o cadastro de nenhuma informação pode prejudicar o SEO de sua aplicação, mas nessa situação é um problema do plugin ou do seu mal uso?

Dai caímos num segundo problema, culpar toda uma tecnologia ou processo por conta plugin, isso é muito comum de achar, por exemplo, no canal do mestre SEO do Fabio Ricotta que eu admiro bastante eu vi o seguinte relato:

Fabio sempre aponta informações baseado em experiências próprias, falando que sua experiência não foi válida mas analisando o vídeo vou comentar certos pontos:

  • Começando pelo título “Como AMP pode matar o seu projeto” já temos o direcionamento de para a tecnologia.
  • Nenhum momento ele especifica qual plugin utilizou generaliza o problema para tecnologia
  • Falhas como esquecer de adicionar código de tracking não é um problema da tecnologia
  • Depois atribuiu o fato plugin remover o código de tracking, novamente não é uma falha da tecnologia. Quando esse tipo de problema acontecer recomendado é notificar o desenvolvedor do plugin para que o problema não se repita
  • Por fim atribui limitações de não ter caixa de comentários, eu utilizo o plugin oficial do AMP tenho todas as funcionalidades do core do WordPress rodando normalmente, mas isso pode ser a limitação do plugin a qual ele utilizou
  • “por padrão o plugin cria uma versão tosca” – Importante especificar qual plugin foi utilizado, por exemplo, novamente a tecnologia sendo resumida a um plugin do AMP oficial a versão reader não é recomendada pelo próprio Google, mas existem opções de customização. Mas temos opções de disponibilizar uma versão idêntica a versão não-AMP.

Opiniões de influenciadores como o Fabio tem um peso muito grande e quem não conhece a tecnologia cria resistência sem mesmo nunca ter utilizado. Por isso é importante antes de compartilhar experiências ser mais específico sobre plugins WordPress e cenários de sua experiência.

Perfomance, SEO ou AMP, por exemplo, não se resumem apenas a instalar um plugin. O plugin de AMP facilitam o seu uso, mas a instalação sem o mínimo de configuração prejudicam a experiência do usuário. Além disso podemos criar um tema totalmente com AMP.

Performance não se resume a adicionar cache tem outra série de recursos que ações que melhoram o desempenho de sua aplicação. Além disso, SEO e Performance são tarefas continuas que nunca acabam precisam de manutenção constante.

Qualquer pessoa tem o total direito de não gostar de uma tecnologia específica mas é importante validar certos pontos antes de compartilhar qualquer opinião. Sou totalmente aberto a tecnologias e contra a clubismo com tecnologia. AMP possui pontos a melhorar assim com WordPress, JavaScript, PHP e outras linguagens, frameworks e CMSs.

Que você acha sobre o assunto? deixe um comentário com sua opnião.

Categorias
AMP Accelerated mobile pages WordPress

AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WP no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas como isso é possível?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

  • AMP JS – Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
  • AMP HTML – Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
  • AMP Cache – Esse item é ativado quando sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Um bom exemplo de bloqueio da renderização de nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Auditoria de desempenho utilizando chrome devtools

Nos testes realizados na versão semAMP:

  • Primeira impressão de conteúdo é realizada em 3.4 segundos
  • O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do Youtube, por conta de rodarem um um iframe eles não conversam entre si acabam requisitando os mesmo scripts diversas vezes.

requisições realizadas pela página sem o plugin AMP

Como podemos ver na imagem acima temos varias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas ao mesmo tempo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Teste performance realizado como o plugin AMP ativo

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

  • Primeira impressão de conteúdo é realizada em 2,8 segundos
  • O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como por exemplo conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Requisições JavaScript feitas com o plugin ativo.

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin

Quando foi lançado em 2016, o AMP teve seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Página principal do plugin do AMP

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

  • Leitor(2016): Onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
  • Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
  • Padrão: Nessa modo sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente em uma versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguinte opções:

tela principal do plugin AMP

Inicialmente temos um banner de boas vindas, em seguida temos duas opções de experiência AMP website e AMP Stories.

  • AMP Website: irá habilitar AMP em sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
  • AMP Stories: vou dedicar um post para essa sessão mas uma breve introdução stories foi incluído recentemente na plataforma com ele temos a opção de adicionar chamadas aos nossos posts com animações. Caso queira saber mais confira a documentação oficial do AMP Stories.
painel com opções de templates

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que iremos utilizar em nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador mas sua experiência é bem simple.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP. Porque essas versões tentarão ser idêntica a versão não AMP. Para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Mas qual a importância de ter um conteúdo válido AMP? Primeiro por uma questão de boas práticas manter a qualidade do código de sua aplicação e Segundo todo conteúdo válido pode fazer uso do AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty não precisei realizar nenhuma alteração em meu tema. Segundo passo foi resolver os problemas de compatibilidade com plugins.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

lista de erros de validação AMP

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin. Caso isso não seja possível você pode desabilitar as partes que causam problemas e verificar como o plugin se comporta. Segunda opção é utilizar componentes AMP para substituir plugins posso fazer outro post sobre o assunto, caso tenha interesse.

Analytics

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA so seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking:

Plugin site kit by Google

Essa é uma breve intro sobre o plugin do AMP para WordPress em meu canal do Youtube também gravei sobre o assunto:

intro sobre AMP

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP em meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.

Categorias
Tutoriais WordPress

Criando páginas single para cada categoria (Single templates) no WordPress – 2019

Esse post originalmente era de 2011, dei uma atualizada no conteúdo com alguns novos recursos e correções. Trabalhando com WordPress você tem um arquivo para cada situação específica, por exemplo, o arquivo responsável pela página de categoria é o arquivo category.php, ou page.php para uma página, ou 404.php quando o conteúdo não for encontrado, assim como para página single.

Quando tratamos de post o arquivo mais específico é o single.php, por que o mais específico? Caso o single.php não exista o index.php será responsável por exibir o conteúdo da single ou o mais novo arquivo de template singular.php ele foi introduzido na versão 4.3 do WordPress para exibir o conteúdo de um post ou uma página. A imagem abaixo representa a ordem de carregamento:

Mas além dessas opções também podemos criar uma arquivo para a single de cada categoria, mas isso só é possível com trabalhando com três métodos diferentes: trabalhando com filtros , trabalhando com plugin ou trabalhando com condicional tags.

Carregando diferentes templates com add_filter

A primeira forma é adicionando um filtro para isso devemos adicionar-lo dentro do functions.php, o código ficará da seguinte forma:

add_filter('single_template', 'create_single_template'); function create_single_template( $template ) { global $post; $categories = get_the_category(); // caso não tenhamos categoria retornamos o template default. if ( ! $categories ) return $template; //resgatando o post type $post_type = get_post_type( $post->ID ); $templates = array(); foreach ( $categories as $category ) { // adicionando templates por id e slug $templates[] = "single-{$post_type}-{$category->slug}.php"; $templates[] = "single-{$post_type}-{$category->term_id}.php"; } // adicionando os templates padrões $templates[] = "single-{$post_type}.php"; $templates[] = 'single.php'; $templates[] = 'singular.php'; $templates[] = 'index.php'; return locate_template( $templates ); }

Explicando código acima, aplicamos um filtro quando o WordPress chama o template para exibir um post, esse código é maior que a versão anterior desse post(2011), por duas razões continuamos retornando uma comportamento padrão e segundo realizamos um tratamento para não sobrescrever a single de um post type, exemplo, caso tenhamos uma categoria filme e um post type filme não termos conflito pois a single da categoria ‘filmes’ será single-post-filmes.php e a single do post type ‘filmes’ será single-filmes.php.

Carregando diferentes templates com Plugin

Alterar functions.php de forma errada pode afetar o funcionamento do todo o seu tema, para evitar problemas caso não domine muito programação a segunda forma é utilizando plugin, ainda sim você precisará de noções de programação para criar o novo template a diferença que qualquer erro afetará somente a página single que você estará criando.

Temos várias opções de plugins os passos serão bem parecidos, vou listar o plugin com atualizações mais recentes o Custom Post Template By Templatic:

  1. Baixe o plugin e instale o plugin em sua aplicação.
  2. Ative o plugin
  3. Crie um novo template para sua página single com um comentário no início do seu arquivo:
<?php /* PostType Page Template: [Nome para descrever seu template] Description: [Essa parte é opcional] */ ?>

Esse comportamento é bem parecido como template pages, nesse caso o nome do arquivo é irrelevante pode ser qualquer um. Feito isso se tudo ocorrer bem um dropdown irá aparecer na sua página de edição de posts para selecionar o template desejado.

A terceira forma é trabalhando com tags condicionais, elas são funções que funcionam como perguntas lógicas que retornam true ou false, para nossa solução iremos trabalhar com “in_category()”, para o nosso código não ficar extenso podemos dentro de nosso loop utilizar get_template_part como no exemplo abaixo:

// dentro do loop if ( in_category( 'filmes' ) ) { get_template_part( 'template-parts/content', 'filmes' ); } else { get_template_part( 'template-parts/content', 'post' ); }

O código acima inserimos dentro de nosso single.php não criamos um template novo para toda nossa single e sim um pequeno bloco que será incluído pela função get_template_part, caso o post seja da categoria “filmes” ele ira buscar dentro da pasta template-parts o arquivo “content-filmes.php” nele você irá realizar a customização que você deseja, caso contrário carregamos o arquivo content-post.php um trecho genérico para outras categorias.

Mais infos sobre conditional tags : http://codex.wordpress.org/Conditional_Tags

Qualquer dúvida só deixar um comentário para mais tutoriais sobre WordPress acesse a página da categoria Até o próximo post pessoal!

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