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
WordPress

Monitorando seu site com Site Kit by Google

O Site Kit é o plugin oficial do Google para monitoramento de sites WordPress, o plugin agrupa as principais ferramentas de monitoramento do Google, como:

  • Google Search Console – relatórios sobre como sua aplicação se comporta na busca
  • Google Analytics – relatórios de como o usuário navega pelo seu site
  • Google Tag manager – Permite adição de tags de monitoramento sem a adição de código
  • AdSense – Relatórios sobre os ganhos com anúncios do Google
  • PageSpeed Insights – Veja como sua aplicação se comporta referente a desempenho
  • Optimize – Ferramentas para teste A/B

O plugin conecta com todas essas ferramentas, mas não polui a interface do painel do WordPress. Com o Site kit podemos listar algumas Vantagens:

  • Ele trás uma interface com informações simplificadas dos seus relatórios caso queira ter um relatório mais completo você é direcionado para as ferramentas específicas.
  • O plugin que você consegue centralizar essas informações em um único painel.
  • Também disponibiliza métricas por postagem.
  • As permissões podem ser disponibilizada por ferramentas
  • O plugin é inteiramente grátis
Relatórios por página

Instalação em 3 passos

Site Kit Wizard

Para instalar o plugin você precisará de acesso para a conta que administra as contas dos serviços o qual você deseja vincular. E os passos serão os seguintes:

  • Verificar se você é proprietário da aplicação
  • Permitir acesso ao Google aos dados do domínio relacionado
  • Configurar a ferramenta desejada

Um ano utilizando o plugin

No ano passado tomei conhecimento do plugin visitando o WordCamp Europe em Berlin, na ocasião vi que o plugin estava em beta e comecei a testar-lo desde então. De um ano pra cá vi a sua evolução nos primeiros meses após o lançamento. Na fase inicial alguns problemas foram encontrados devido ao teste em massa realizado pela comunidade. Agora vou falar um pouco sobre minha experiência particular com o Site Kit.

Utilizei por anos o MonsterInsights plugin que trazia bastante informação era um plugin bem completo mas acabava comprometendo o desempenho do painel do WordPress. Depois de uma tempo utilizando o Site Kit não senti mais falta da quantidade de gráficos e informações que o MonsterInsights disponibilizava. A solução pelo Site Kit de redirecionar os relatórios completos para as ferramentas específicas.

Outro detalhe importante com o Site Kit habilitei apenas os serviços do meu interesse. No caso Search console, PageSpeed Insights e Google Analytics. Então tenho um painel customizado sem a necessidade de carregar scripts desnecessários.

Por fim a integração com outros plugins do Google, como por exemplo o plugin de AMP para WordPress do Google eu não tenho interferência na validação das minhas páginas.

Limitações do plugin

Algo já de conhecimento do time do Google são algumas limitações na ativação ou na utilização do plugin.

Browsers

  • Opera: Para ativar o Site Kit com o Opera desative temporariamente a funcionalidade de Ad Blocker.
  • Firefox e Chrome: Se o seu site seguro (HTTPS) fizer uso de recursos HTTP, ele poderá ser classificado como conteúdo misto enquanto estiver usando o navegador Chrome ou Firefox.

Plugins WordPress

Plugins de cache (WP Super Cache, Breeze, Autoptimize): desative temporariamente os plugins de cache enquanto estiver configurando o Site Kit.

Monster Insights: desative temporariamente o Monster Insights enquanto estiver realizando a configuração do módulo do Google Analytics.

Updraft Plus: Desative a opção de armazenamento de backup do Google Drive durante a configuração do Site Kit ou desative o Updraft Plus durante a instalação do Site Kit.

WordPress Multisite

Atualmente o Site Kit não dá suporte a versão multisite do WordPress. Se você deseja utilizar em uma aplicação multisite realize a ativação de forma individual. O suporte para cobertura de toda a aplicação multisite está sendo desenvolvida para versões futuras mas sem previsão de Release.

Conclusão

Apesar das limitações existentes e períodos de instabilidade nas primeiras versões. Após um ano minha experiência com o plugin é satisfatória, apesar do contratempo das primeiras versões a integração de todos os serviços de monitoramento um um lugar só e sem ser de forma poluída ajuda bastante, lembrado que todas as funcionalidades são de graça.

Caso tenha alguma dúvida sobre o plugin deixe um comentário e para ler mais sobre WordPress acesse a página da categoria.

Categorias
JavaScript Tutoriais

Machine Learning descomplicado com ML5.js

Conhecida como uma biblioteca amigável para machine learning, ml5.js é uma das alternativas mais acessíveis para você que deseja se aventurar no mundo do Machine Learning. Meses atrás eu descobri esta biblioteca web através do canal coding train.

O que é machine Learning?

Antes de entramos em detalhe se você nunca ouviu falar em Machine Learning, algo que entrou no hype na computação com uma serie de recursos possíveis graça a computação na nuvem e a infinidade de dados que possuímos atualmente. Mas machine learning existe na computação desde a década de 40.

Quando umas das definições mais clássicas foram criadas por Arthur Samuels:

É o campo de estudo onde são dados aos computadores a capacidade de aprender algo sem ser explicitamente programado.

Uma ótima definição feita no canal coding train com uma simples comparação na programação clássica temos o seguinte algoritmo:

if(mouseX > 200) { console.log("lado direito"); } else { console.log("lado esquerdo"); }

Já com machine learning passamos uma série de dados:

  • 300 – direita
  • 401 – direita
  • 210 – direita
  • 100 – esquerda
  • 87 – esquerda
  • 24 – esquerda

A partir dessa série de dados o Machine Learning vai analisar esses dados e tentar fazer uma previsão de dados futuros nesse caso a quantidade de amostra é importante para o sucesso da nossa aplicação.

Dentro dos tutoriais sobre ML5.js vamos falar muito sobre três items:

  1. Redes neurais – os algoritmos responsáveis por processar tarefas de Machine learning, o de temos uma entrada de dados e fazemos uma série de cálculos para ter uma saída esperada. Para identificar padrões específicos.
  2. modelos pré-treinados – modelos pre-treinados é a parte que iremos abordar 90% dos casos por que são os items em mais evidência do momento, utilizado pelas grandes empresas para identificar usuários, moderação de texto, reconhecimento de voz entre outras funcionalidades.
  3. data sets – são os grupos de dados que utilizamos para treinar os nossos modelos.

Baseado nessa rápida de alguns pontos chaves, agora vamos falar sobre ML5, a idéia é criar mais posts sobre o assunto assim quando alguns pontos dos Machine learning forem abordados traremos mais descrições

ML5.js

Ml5.js foi construída em cima do tensorFlow.js que possibilita o uso machine learning na web com o processamento de dados através da GPU, geralmente utilizado para o processamento gráfico, Mas o tensorFlow.js utiliza desse recurso para não afetar o processamento da CPU.

Com ml5.js visa atingir uma audiência que trata machine learning em mais alto nível desenvolvedores web e artistas. A biblioteca possui algoritmos e modelos que realizam a classificação de três tipos da dados imagem, sons e textos.

Para cada grupo temos umas série de funções com diferentes funcionalidades, por exemplo, a função imageClassifier() através de redes neurais conseguimos reconhecer o conteúdo da image retornando um objeto com informações sobre a imagem vindo de um modelo pre-treinado

Mas com a função imageClassifier podemos treinar o nosso próprio modelo. Outra função interessante é poseNet(), com ela conseguimos identificar poses humanas, ela pode identificar uma única pose ou múltiplos integrantes.

No geral temos 10 funções para classificação de images e 2 funções para classificação de som e 4 funções para identificação de texto.

Tensorflow.js

É uma biblioteca criada pelo Google para trabalhar machine learning no JavaScript, foi construído baseado no TensorFlow biblioteca escrita em Python. Com tensorFlow.js podemos utilizar modelos pré-treinados, para classificação de imagens, detecção de objetos, detecção de texto tóxico e reconhecimento de comandos por voz.

Ou treinar o nosso próprio modelo, ele é uma biblioteca base do ML5.js possui uma estrutura mais complexa que o ML5.js

Exemplo prático

Agora que temos uma introdução desses três items chaves vamos fazer o nosso primeiro exercício com ML5.js, quando escrevi esse tutorial a lib estava na versão 0.3.1, agora vamos escolher uma foto para testar com ml5.js, sinta-se a vontade para escolher a sua foto:

Escolhi essa imagem para realizar meu teste

Agora temos a nossa imagem vamos criar o nosso primeiro classificador de imagens:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ML5JS project</title> <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script> </head> <body> <img src="./assets/dublin.jpg" id="foto" /> <script> // Passo 1: Criar uma classificador de imagems com mobileNet const classifier = ml5.imageClassifier('MobileNet', onModelReady); function onModelReady() { // Passo 2: Selecionar uma image const img = document.querySelector("#foto") // Passo 3: Fazer a predicção let prediction = classifier.predict(img, gotResults); } // Passo 4: Fazer algo quando tivemos o resultado! function gotResults(err, results) { console.log(results); // e aqui acontece toda a mágica } </script> </body> </html>

No código acima temos exemplo fazemos a classificação da imagem que escolhemos acima, primeiramente fazemos o carregamento da lib em uma CDN, após adicionamos a imagem com uma tag img em nosso markup, temos uma tag script com o código que irá analisar nossa imagem.

Dentro da tag script o primeiro comando faz a chamada de uma função imageClassifier dentro da biblioteca ML5 passando dois parâmetros:

  • modelo – nesse caso vamos utilizar o mobileNet esse modelo pre-treinado está na nuvem ele possui mais de 14 mil imagens em seu dataset
  • função de callback – o segudo parâmetro a função de callback que iremos chamar quando nosso classificador de imagens estiver pronto.

Quando nosso modelo estiver pronto vamos chamar a função onModelReady dentro dela selecionamos a imagem que queremos analisar e com o nosso classificador de imagens(classifier) requisitamos a previsão da imagem. novamente passando dois parâmetros a imagens que iremos analisar e a função de callback.

Quando executamos o nosso código em um browser o resultado será o seguinte:

screenshot to console do browser

Um resultado meio estranho se traduzirmos o resultado temos label como “mastro” ou “poste” com confidência de 0.76 ou seja 76%. Como podemos ver temos uma farbrica no fundo com duas chamines.

A escolha da imagem foi proposital para a gente entender como funciona a analise de images, como falamos anteriormente MobileNet é um modelo pré-treinado mas ele tem uma base de 14 mil imagens o problema nessa caso será que o dentro dessas 14 mil imagens não treinamos o nosso modelo para identificar fábricas.

Se fizermos um segundo teste com essa imagem:

Segunda tentativa

O resultado será o seguinte:

Agora temos o resultado classificado como “beer glass”(copo de cerveja) com uma confidência de 94%, então como podemos ver não existe uma mágica por trás do Machine Learning.

Com isso entendemos que precisão é baseada na quantidade de informação em que meu dataset detém. Por isso empresas que detem uma grande base de informação conseguem aplicar o tecnologia a várias soluções.

Caso queira conferir mais tutoriais sobre JavaScript aqui confira o link: https://blog.fellyph.com.br/category/javascript/

Para esse post vamos ficando por aqui a idéia que em breve estarei postando um vídeo em meu canal. Se ainda não segue o canal aqui está o link: https://www.youtube.com/user/fdangellys

Categorias
AMP Accelerated mobile pages JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.

Categorias
Tutoriais Web WordPress

Feeding Google Search – Structure data

Content is one of the keys to the success on the internet, categorizing your content makes it more visible to the search engines and structure data will be your best friend to do it. This simple action could make you a step forward in the competitive market.  On 2011, Google, Bing and Yahoo launched an initiative called Schema.org, this project’s objective is to create and support schemas for structured data. And now this information start to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards. Actually, Google.

Now, this information starts to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards.

Actually, Google gives to us these options to pages enhancements: 

  • Breadcrumbs
  • Corporate contact information
  • Carousels for sequential results
  • Logos
  • Sitelinks Search box
  • Social profile links

Content types:

  • Articles
  • Books
  • Courses
  • Events
  • Job postings
  • Local businesses
  • Music
  • Products
  • Recipes
  • Tv and movies
  • Videos

For each situation, needs some required information, for example, recipes we will need to specify, numbers of calories, ingredients, and time to cook. Google uses the structure data to display these categories in a different layout in the search result, in that way help the users find the right content and increase the click rate for the websites that show the content with more quality.

Ok, what about the code?

There are three different formats JSON-LD(Recommended by google), Microdata and RDFa. For a long time, I used Microdata but now I’m working with different projects again and different markups the JSON-LD makes the changes simple.

Code examples:

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

 

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>

As we can see above, JSON-LD we create a structure independent from the content. But we need write the same information twice. Microdata the advantage is we just need to write the content once but the information is totally markup dependent. Especially for articles, we have two different rich cards, one for pages that support AMP and other for Non-AMP pages.

Search result without AMP

Search result with AMP

After adding this information to your content we need to validate it, for that we use the Structured Data Testing Tool

If you are using WordPress there are many different plugins to use Structure data in your Website: https://wordpress.org/plugins/tags/structured-data/