Categorias
AMP Accelerated mobile pages WordPress

A minha audiência caiu com o plugin de AMP, e agora?

Uma pergunta no meu canal chamou-me atenção para fazer este post:

Cara, fiz o amp aqui no meu site, mas as visitas caíram 70%, sabe-me dizer se tem algum motivo principal para isso?

Isso é uma pergunta que as causas podem ser diversas, mas nesse posts vamos listar alguns possíveis problemas, vou focar no plugin oficial do Google, mas algumas regras podem ser aplicadas a outros plugins. Primeiramente você precisa entender como funciona o plugin de AMP, as suas limitações e o modos que ele trabalha, eu tenho o vídeo no meu canal do Youtube onde eu explico mais sobre eles, mas em resumo nos temos:

  • Modo leitor, com uma experiência mais simples onde você não precisa se preocupar como os problemas de javascript.
  • Modo de transição, onde você tem parte do seu conteúdo em AMP e não AMP
  • Modo padrão, onde seu conteúdo por padrão será AMP, mas para isso você precisa utilizar plugins e temas compatíveis.

Uma vez que o seu site já está em produção, o ideal é verificar o desempenho do seu site na versão AMP e não AMP na busca. Os dois primeiros modos disponibilizar duas versões para o seu site se analytics estiver habilitado acompanhe a audiência em ambos e veja se vale a pena ou não ir full AMP.

Falando em Analytics vamos falar o que interessa, a lista de items que pode afetar a sua audiência:

1. Esquecer de ativar o Google Analytics

Parece algo banal, mas é algo bastante comum. Você instala o plugin e não configura o Google analytics e vê a sua audiência despencar, neste caso você não está perdendo audiência, mas está deixando de monitora-la. Quando você trabalha com AMP a forma de adicionar o script de monitoramento do Google Analytics muda, é preciso de uma tag específica para realizar a contagem de visitas do usuário. Você pode realizar a inclusão de diversas maneiras:

  • Adicionando a configuração: para isso você irá precisa do ID do seu Google Analytics, e ir nas configurações do plugin AMP, selecionar analytics e adicionar o código JSON para monitoramento.
  • Segunda forma é através do plugin Site Kit
exemplo da tela de adição do código do analytics

2. Deixar as páginas AMP com erros

O primeiro requisito para a sua página ser indexada nos resultados de busca do Google como uma página AMP, é ser uma página Válida em outras palavras: não deve conter erros AMP.

Se você publicar uma seu projeto cheio de erros AMP, dependendo do formato que você escolher(Leitor, padrão e transição). Você irá tirar todas as suas páginas da busca. O ideal é se você não tem um tema compatível, você deve escolher ou o modo leitor, ou o modo de transição e monitorar os erros da sua página.

3. Mudança de tema junto com a instalação do plugin

Muitas vezes a solução é mudar para um tema compatível, mas antes de fazer a migração você deve prestar atenção em alguns fatores:

  1. Mapa de navegação, preste atenção se o tema tem esquema de navegação similar ao tema que você utiliza. Caso queira realizar a mudança na navegação lembre de submeter o novo sitemap.
  2. O esquema de títulos de páginas permanecem os mesmos.
  3. Desempenho do tema, o tema na versão AMP tem um desempenho melhor ou pior ao seu tema anterior
  4. Monitore os erros 404 da sua aplicação

4. Falta de acompanhamento na transição

Tudo ocorreu bem durante a migração, páginas estão válidas, esquema de navegação não foi alterado, e agora?

Monitore… Monitore… Monitore…

O trabalho de melhoria de um aplicação web é contínuo, muitas vezes as pessoas instalam um plugin e depois largam a aplicação como se tudo já estivesse ocorrendo bem. Sempre é bom acompanhar o seu site e a melhor ferramenta para ver o desempenho de sua aplicação na busca do Google é o Search Console.

Nele você pode acompanhar como o seu site se comporta na busca e quais páginas AMP estão sendo indexadas na busca do Google. Caso escolha o modo leitor e de transição, é muito importante comparar o desempenho entre as duas versões, a versão AMP e a versão AMP. Com isso ver se faz sentido migrar ou não e onde você deve melhorar em sua versão AMP.

Página de monitoramento do Search Console

5. Mudanças nos requisitos da busca

Vale lembrar que você não é o centro do universo, as vezes a mudança na sua audiência pode está relaciona com alguma mudança no rankeamento do Google, por exemplo, Core web vitals são novas regras que alteram os fatores para sua página possuir um bom posicionamento na busca, ele está sendo introduzido gradualmente desde do mês de Julho de 2021.

Dependendo de qual modo você utiliza em sua aplicação para entregar páginas AMP e páginas não AMP sua queda na audiência pode estar ocorrendo na suas páginas não AMP, por exemplo, ou Suas páginas AMP precisam de atenção.

Lembrando que AMP ajuda a melhorar o despenho no front-end de sua aplicação, problemas como entrega de imagens e resposta do servidor pode afetar o tempo de entrega do seu conteúdo.

6. Por fim time que se ganha não se mexe

Se o seu tema não AMP já tem um ótimo desempenho, você possui noções de desenvolvimento e realiza manutenções frequentes na sua aplicação. Você precisa realmente mudar sua aplicação para AMP ?

  • Antes de realizar a migração, teste quão melhor é sua versão AMP comparada a sua versão não AMP?
  • Quanto a versão AMP afeta as funcionalidades da sua aplicação?
  • Quanto tempo você tem para atualizar sua aplicação.
  • Qual é o melhor modo referente a sua aplicação

Alguns casos a instalação de AMP pode não ser necessária, caso você já tenha um tema com um ótimo desempenho, para isso você pode testar sua aplicação na página de relatórios do web.dev

Sempre estude as vantagens de uma tecnologia antes de usar veja os seus pros e contras. Como essa tecnologia se adequa a sua realidade, pois não existe bala de prata e sim existem ferramentas para cada tarefa.

Eu utilizo o plugin do AMP a mais de dois anos, mas claro utilizo o tema padrão do WordPress e não faço uso de nenhum plugin mirabolante, o meu foco principal é o conteúdo e não preciso me preocupar com melhorias de desempenho nas minhas páginas ou melhorias para dispositivos móveis, o plugin toma conta disso tudo pra mim.

Categorias
PWA - Progressive web apps

Perguntas do curso de PWA: PWA e Frameworks JS

Como transformar a minha aplicação Vue.js em uma progressive web app?

O curso que rodo no YouTube é focado em vanilla JavaScript e tem uma configuração específica utilizando webpack em um certo momento. E uma pergunta recorrente é como transformar aplicações que utilizam bibliotecas e frameworks JavaScript em uma Progressive Web App. Para aplicações Vue.js, React ou Angular. Cada uma possui caminhos específicos que podem facilitar a implementação da sua PWA.

Vue

Para transformar a sua aplicação vue.js em uma PWA o caminho mais fácil é através do Vue CLI(command line interface) ele irá te auxiliar com a configuração e criação dos arquivos necessários para você criar uma progressive web app.

Após criar sua aplicação vue com o comando “vue create nome-do-seu-app” você irá executar o seguinte comando:

vue add pwa

Você precisará executar esse comando em seu terminal de linha de comando. Assim será instalado o pacote @vue/cli-plugin-pwa, ele irá adicionar um service worker que será habilitado somente em produção ou seja quando você roda os comando “npm run build” ou “yarn build”. A configuração de sua pwa será feito ou pelo arquivo vue.config.js ou em seu package.json dependendo se sua instalação.

Exemplo:

// Dentro vue.config.js
module.exports = {
  // ...outras opções do vue-cli plugin...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configuração do workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc é necessário para o modo injectManifest.
      swSrc: 'dev/sw.js',
      // ...outras opções do WorkBox...
    }
  }
}

Code language: JavaScript (javascript)

Como podemos ver o plugin do vue-cli utiliza workbox para fazer a configuração de sua PWA.

Angular

Para transformar a sua aplicação Angular em uma Progressive Web Apps você irar executar no seu terminal o seguinte comando:

ng add @angular/pwa
Code language: CSS (css)

Esse comando irá:

  • Adicionar uma Service Worker com uma configuração padrão de cache.
  • Criar um arquivo manifest json para a sua aplicação
  • Adicionar um link para o arquivo manifest no seu index.html
  • Criar os ícones para a sua aplicação no diretório “src/assets”

React

Existem templates específicos quando você utilizar create-react-app para criar um projeto. Por exemplo: 

npx create-react-app my-app --template cra-template-pwa

Para templates TypeScript:

npx create-react-app my-app --template cra-template-pwa-typescript

Rodando esse comando no seu terminal, você irá ter uma estrutura básica com service worker rodando uma versão offline.

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

Categorias
HTML5 Tutoriais

Trabalhando com a propriedade CSS currentColor

Nesse post vamos falar sobre a palavra-chave currentColor do CSS ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como.

currentColor

É uma palavra-chave que pode ser adicionada na propriedade CSS color. Basicamente ela irá refletir a cor definida na propriedade “color” no elemento em que ela se encontra:

p {
  color: peru;
  padding: 1em;
  border: 5px solid currentColor;
}
Code language: CSS (css)

E o resultado será o seguinte:

Isso mesmo a cor peru é uma cor válida CSS, mas o importante aqui é que não precisamos repetir o valor da nossa cor para a propriedade na borda simplesmente chamamos a palavra-chave e ele passa a útil quando temos elementos que passam por mudança de estado, por exemplo, botões e links:

button {
  color: salmon;
  background: white;
  border: 3px solid currentColor;
  padding: 1em;
  transition: 300ms all;
}

button:hover {
  color: navy;
}
Code language: CSS (css)

No exemplo acima um botão, seguindo as mesmas propriedades do parágrafo anterior, entretanto nesse caso estamos a trabalhar com um botão e quando o nosso botão está no estado hover adicionamos a cor “navy”, assim o resultado será o seguinte:

Botão no estado normal
Botão no estado “hover”

Além disso, podemos resgatar o valor do (color) de uma elemento pai como no exemplo abaixo: 

    <div class="salmon-box">
      <p>Test CSS</p>
      <p>Test CSS</p>
      <p>Test CSS</p>
    </div>
<style>
.salmon-box {
  color: salmon;
}

p {
  padding: 1em;
  border: 3px solid currentColor;
}
</style>
Code language: HTML, XML (xml)

Assim o resultado será o seguinte:

Detalhe para o exemplo anterior o botão não conseguiu resgatar o currentColor somente quando a cor é definida no próprio elemento.

Suporte

currentColor ganhou suporte em 2009 pelo navegador Opera e desde então os navegadores passaram a dar suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.

Para mais tutoriais acesse a página da categoria tutoriais.

Categorias
WordPress

API de Blocos Gutenberg versão 2

Na versão 5.6 do WordPress foi adicionado a nova API de blocos Gutenberg ou Block API 2, ele tem como foco tornar a edição de blocos mais leve, reduzindo a quantidade de elementos na árvore de elementos DOM do editor, a versão 2 também trás melhorias para ajudar na customização de blocos em temas e plugins .

Habilitando a API versão 2

Para fazer o uso da nova API, devemos especificar na criação de nosso bloco que iremos trabalhar com a versão 2 da API passando o atributo “apiVersion” dentro da função registerBlockType, exemplo:

registerBlockType( name, { apiVersion: 2 } );
Code language: CSS (css)

useBlockProps

Recentemente gravando o curso de Gutenberg em meu canal notei quando utilizando o script create-block os blocos vinha uma um novo hook react relacionado o useBlockProps.

Esse novo hook adiciona em nosso bloco todos os atributos relacionados e o eventos necessários para um bloco. Agora qualquer propriedade que você deseja passar para o bloco deve ser gerenciado pelo useBlockProps. Assim utilizamos o useBlockProps da seguinte forma:

import { useBlockProps } from '@wordpress/block-editor';
 
function Edit( { attributes } ) {
    const blockProps = useBlockProps( {
        className: someClassName,
        style: { color: 'blue' },
    } );
    return <p { ...blockProps }>{ attributes.content }</p>;
}

Code language: JavaScript (javascript)

Comparando o mesmo código com a versão 1:

function Edit( { attributes } ) {
    return (
        <p className={ someClassName } style={ { color: 'blue' } }>
            { attributes.content }
        </p>
    );
}
Code language: JavaScript (javascript)

Caso queira aprender a construir blocos Gutenberg, lá iremos utilizar mais exemplos com a nova API:

Se ainda não segue meu canal assine e acompanhe quando novas aulas forem publicadas.

Categorias
WordPress

Gifs e legendas para vídeos chegam no web stories para WordPress

Nos posts anteriores falei sobre o novo plugin de web stories para WordPress ness post vamos falar das novidades na versão 1.1 do plugin:

  • Suporte a inclusão de gifs
  • Legendas para vídeos
  • Inclusão de templates para textos

Um gif pode valer mais que mil palavras

Inclusão de gifs em stories é algo ajuda na parte editorial trazendo animações que trazem referências para um grupo específico ou assunto. O recurso já utilizado em outras plataformas e agora temos suporte a inclusão de gifs no Web Stories para WordPress através da plataforma Tenor. Da mesma forma que temos acesso a galeria do unsplash agora temos a inclusão da biblioteca de gifs do Tenor.

Novo painel de inclusão de gifs

Legendas

Legendas é um item essencial para acessibilidade e SEO, Agora temos a opção de adicionar legendas em nossos vídeos com o plugin. Outro fator importante de legenda muitas vezes usuários mobile assistem nosso vídeo sem áudio, em transporte público ou momentos onde não se pode reproduzir vídeos com áudio para esses casos a legenda tem um papel importante.

O formato suportado pelo web stories é o WebVTT, formato suportado por diversos players e padrão da web que possui o seguinte formato:

WEBVTT - Web Core Vitals

00:00.000 --> 00:03.005
O web core vitals é uma nova métricas que

00:03.000 --> 00:05.995
vai ai fazer parte do ranqueamento da busca do Google

00:06.039 --> 00:08.529
E ela vai ter o foco na experiência do usuário
Code language: CSS (css)

O documento precisa começar com WEBVTT em seguida o título do vídeo(opcional) e os blocos sempre seguidos por um espaço. Cada bloco possui uma linha com o tempo e a segunda linha a legenda para aquele espaço de tempo.

WebVTT aceita propriedades como alinhamento e tamanho de fonte mas não vamos entrar nesses detalhes caso não queira tratar com esses ítens na web você vai encontrar alguns editores visuais para legenda como o VTT Creator:

Uma vez que criamos a legenda para o nosso vídeos adicionamos via painel lateral quando selecionamos o nosso vídeo:

Editor visual com vídeo selecionado

Templates para textos

Por último mais não menos importante temos a inclusão de templates para textos, funcionalidade que irá ajudar na parte gráfica a produção de stories. Nas primeiras versões tinhas templates para stories nesse caso temos combinações de textos e títulos que irão ajudar a harmonizar o seu conteúdo.

Novo painel de templates de textos

Se já está utilizando o plugin de stories para WordPress diga o que você está achando do plugin nos comentários. Para mais posts sobre WordPress acesse a página da categoria.