Categorias
AMP Accelerated mobile pages WordPress

A 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 uso nenhum plugin mirabolante, o meu foco principal é o conteúdo e não preciso preocupar-me com melhorias de desempenho nas minhas páginas ou melhorias para dispositivos móveis, o plugin toma conta disso tudo para mim.

Para mais posts sobre AMP acesse o link da página da categoria

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
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
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.

Categorias
WordPress

Criando primeiro seu tema Frontity

No post anterior sobre Frontity vimos como criar o nosso primeiro projeto agora vamos com criar nosso primeiro tema totalmente customizado, caso não conheça o frontity confira o post que fiz uma introdução sobre o framework react. Para esse tutorial o primeiro passo é ir na pasta de nosso projeto e criar um novo pacote para nosso tema executando o seguinte comando em nosso terminal:

npx frontity create-package [nome-do-pacote]
Code language: JavaScript (javascript)

O comando irá criar uma pasta com o nome do pacote que especificamos dentro da pasta packages, lá iremos armazenar todos os pacotes locais responsáveis pela funcionalidades e exibição do conteúdo o nosso site. Em outras palavras podemos chamar do tema de nossa aplicação se olharmos para o Frontity como uma aplicação wp.

Para o nosso projeto irei criar o pacote tutorial-fellyph o código será o seguinte:

npx frontity create-package tutorial-fellyph

O comando irá criar a seguinte estrutura dentro da pasta packages:

|__ packages/ |__ fellyph-tutorial/ |__ package.json |__ src/ |__index.js

Package.json

Contém as configurações do tema como nome do nosso pacote, descrição e dependências:

{ "name": "tutorial-fellyph", "version": "1.0.0", "description": "Frontity package created using the Frontity CLI.", "keywords": [ "frontity", "frontity-tutorial-fellyph" ], "license": "Apache-2.0", "dependencies": { "frontity": "^1.11.1" } }
Code language: JSON / JSON with Comments (json)

Arquivo principal de nosso tema

O arquivo index.js será o arquivo de entrada do nosso pacote/tema e irá conter a seguinte código:

import React from "react"; const Root = () => { return ( <> You can edit your package in: <pre>packages/tutorial-fellyph/src/index.js</pre> </> ); }; export default { name: "tutorial-fellyph", roots: { tutorial-fellyph: Root }, state: { tutorial-fellyph: {} }, actions: { tutorial-fellyph: {} } };
Code language: JavaScript (javascript)

Temos nosso componente principal e as principais configurações do nosso tema:

  • roots: aponta para nosso componente raiz
  • state: contém todos as variáveis armazenadas no estado de nossa aplicação.
  • actions: contém todas as ações compartilhadas em nosso tema.

Agora o próximo passo será ativar nosso novo tema e para isso precisamos alterar o nosso arquivo de configurações frontity.settings.js:

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "blog.fellyph.com.br", "title": "Blog Frontity Fellyph Cintra", "description": "Theme created to the frontity tutorial" } }, "packages": [ { "name": "tutorial-fellyph" }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Se tudo der certo o resultado será o seguinte:

rodando nosso primeiro tema com frontity
Nosso ambiente de teste rodando o tema que acabamos de criar

Agora que temos nosso tema rodando e para alterar o conteúdo podemos alterar o componente Root dentro de nosso index.js. Mas para esse tutorial vamos mover e substituir nosso componente Root para um arquivo separado, nesse caso dentro da pasta tutorial-fellyph/src vamos criar uma pasta components lá iremos criar um arquivo chamado index.js, ele será responsável pelo esqueleto principal de nosso projeto, esse arquivo pode ter qualquer nome mas vamos seguir uma conversão para nos ajudar no futuro.

Agora movendo o código para o arquivo src/components/index.js o nosso código ficará da seguinte forma:

import React from 'react'; const Theme = () => { return ( <h1>Nosso Primeiro tema com Frontity</h1> ); }; export default Theme;
Code language: JavaScript (javascript)

Modifiquei o nome do componente de Root para Theme e alterei o conteúdo para um h1. Já o src/index.js da seguinte forma:

import Theme from "./components/index"; export default { name: "tutorial-fellyph", roots: { "tutorial-fellyph": Theme, }, state: { "tutorial-fellyph": {} }, actions: { "tutorial-fellyph": {} } };
Code language: JavaScript (javascript)

Agora conectamos os dois items, importando e adicionando o componente Theme a propriedade roots.

Lendo informações do WordPress

Até então ainda não lemos nenhuma informação de nossa aplicação WordPress, quando configuramos o nosso projeto dentro da lista de pacotes temos a configuração de wp-source ele será responsável por adicionar os dados do WordPress em nosso estado, se você trabalha com React o conceito estado é algo comum, caso contrário você pode conferir a documentação do react:

{ "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } },
Code language: JavaScript (javascript)

Como podemos ver atribuímos a fonte de nosso conteúdo no estado de nossa aplicação com isso a vantagem de trabalhar com frontiy é que ele irá cuidar de fazer a configuração e filtros em diferentes requisições de conteúdo.

O pacote wp-source possui uma série de funcionalidades onde podemos abordar em mais detalhes no futuro. Mas já com as configurações atuais, podemos acessar esses dados e inspecionar via console no Chrome devTools ou qualquer browser moderno:

chrome dev tools exibindo os dados do post
Quando inspecionamos frontity.state temos o resultado acima

Como podemos ver o state retorna um Objeto do tipo Proxy, ele permite criar uma um proxy para um outro objeto com operações fundamentais nele temos dois parâmetros:

  • target: O objeto que contém os dados.
  • handler: As possíveis operações que conseguimos realizar sobre objeto target.

Dentro de target temos 4 valores:

  • frontity: configurações do nosso projeto como url principal e nome do projeto
  • router: ferramenta de controle de rotas do frontity
  • source: os dados vindos da consulta do wp-source
  • tutorial-fellyph: dados a referente ao nosso tema

Agora vamos ler algumas informações em nosso arquivo principal Theme para isso precisamos conectar nosso vamos utilizar o método connect do Frontity da seguinte forma:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Assim temos o seguinte resultado:

tela do browser carregando dados da aplicação
Carregamos a url atual e o nome do autor

Para acessar os dados de forma mais elegante podemos vamos utilizar dois métodos get para quando temos os dados disponíveis em nosso estado and fetch quando queremos fazer uma requisição http a essa informação. Esses métodos estão disponíveis tanto em nosso router quando em nosso wp-source.

Por exemplo, podemos acessar nosso source e utilizar o método “get” para acessar as informações da página atual da seguinte forma e na sequência acessa a lista de post relacionados:

import React from 'react'; import { connect } from 'frontity'; const Theme = ({state}) => { const data = state.source.get(state.router.link); return ( <> <h1>Nosso Primeiro tema com Frontity</h1> <p>URL Atual: {state.router.link}</p> <p>Autor: {state.source.author[1].name}</p> { data.items.map( item => { const post = state.source.post[item.id] return ( <article key={post.id}> <h2>{post.title.rendered}</h2> </article> ) }) } </> ); }; export default connect(Theme);
Code language: JavaScript (javascript)

Com o código acima acessamos os dados do post e realizamos um loop utilizando a função map para acessar item a item assim acessamos os dados do post com state.source.post[item.id] e na sequência retornamos uma article com o título do post.

Dentro do objeto post conseguimos acessar uma série dados como:

  • categories
  • date
  • excerpt
  • id
  • link
  • status
  • sticky
  • tags
  • title
  • type

Entre outras informações, o resultado visual é bem simples pois não estamos utilizando nenhum estilo até o momento:

tela do browser carregando os últimos posts
Listagem de posts utilizando frontity

Agora temos o nosso primeiro tema com Frontity exibindo uma listagem de posts na home. Vamos finalizando esse post por aqui mas teremos uma continuação com mais customizações em nosso tema.

Caso queira acompanhar mais conteúdo sobre WordPress você pode conferir meu canal no youtube ou acessar a página da categoria WordPress.

Categorias
WordPress

Criando seu primeiro projeto com Frontity

No post anterior eu fiz uma introdução sobre Frontity nesse post eu irei mostrar o passa-a-passo de como criar o seu primeiro Projeto com Frontity.

Para isso teremos alguns pré-requisitos:

  • Node.js instalado em nossa máquina
  • Terminal de linha de comando
  • Um editor de texto para codificar o nosso tema no meu caso irei utilizar o vs code
  • Ter uma aplicação WordPress para conectar com sua aplicação Frontity

Agora com tudo pronto precisamos abrir o nosso terminal na página que queremos criar o nosso projeto e rodar o seguinte comando:

npx frontity create frontity-tutorial

Esse comando irá criar um projeto dentro da pasta frontity-tutorial nesse caso podemos utilizar qualquer nome para o nosso projeto. O processo de instalação utiliza npx, mas caso não conheça ele tem o comportamento similar ao npm mas com uma diferença ele irá. Remover os pacotes uma vez que executados. Caso queira saber mais sobre o recurso acesse este artigo.

Terminal rodando o script para criar um projeto frontity

Quando executado o comando as o recurso irá rodar um passo-a-passo, com duas perguntas a primeira qual será o tema inicial Mars theme ou Twenty Twenty e a segunda pergunta caso queira se inscrever na newsletter do Frontity. Uma vez criado podemos entrar na pasta que criamos e rodar a nossa a aplicação em modo desenvolvimento:

cd frontity-tutorial && npx frontity dev

Agora acessando a pasta frontity-tutorial temos a seguinte estrutura:

my-app/ |__ node_modules/ |__ package.json |__ frontity.settings.js |__ favicon.ico |__ packages/ |__ mars-theme/

Uma vez que rodamos frontity em modo desenvolvimento teremos nossa aplicação rodando no endereço localhost:3000

Tema mars rodando no localhost

Como podemos ver a nossa aplicação está lendo posts de uma aplicação WordPress, mas precisamos adicionar a nossa própria aplicação, caso esteja rodando uma aplicação local você também pode apontar para ela. Mas no meu teste eu vou utilizar o meu blog pessoal e para isso precisamos alterar as configurações do nosso projeto no arquivo frontity.settings.js que contém o seguinte código

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "https://test.frontity.org", "title": "Test Frontity Blog", "description": "WordPress installation for Frontity development" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Nature", "/category/nature/" ], [ "Travel", "/category/travel/" ], [ "Japan", "/tag/japan/" ], [ "About Us", "/about-us/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://test.frontity.org/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Como podemos temos inicialmente algumas configurações do nosso projeto e na parte final temos um endereço guardado na propriedade API esse é um blog de test do frontity para o meu test irei substituir o endereço test.frontity.org por blog.fellyph.com.br assim teremos o seguinte resultado:

Tema inicial apontado para meu blog

Como podemos ver minha aplicação frontity passou a carregar os posts do meu blog pessoal mas o header ainda continua com o conteúdo antigo. Nesse caso essa informação é controlada pelo nosso arquivo de configuração nas propriedades título, descrição e os links pela propriedade menu, assim com a atualização o nosso arquivo ficará o seguinte:

const settings = { "name": "frontity-tutorial", "state": { "frontity": { "url": "blog.fellyph.com.br", "title": "Blog Frontity Fellyph Cintra", "description": "Theme created to the frontity tutorial" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Tutoriais", "/category/tutoriais/" ], [ "Curso PWA", "/curso-online-progressive-web-apps/" ], [ "Sobre", "/sobre/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://blog.fellyph.com.br/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings;
Code language: JavaScript (javascript)

Se você navegar pela a aplicação verá que todos os posts páginas de categorias serão renderizados. Agora o próximo passo caso queira alterar o tema padrão você irá precisar ir na pasta packages/mars-theme/ para entender mais sobre acesse a documentação do tema.

Mas para essa série de posts vamos criar o nosso tema do zero e entender os conceitos por trás do Frontity mas isso eu irei deixar guardado para o próximo post. Para ler mais posts sobre WordPress acesse a página da categoria WordPress.