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

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.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugin Web Stories do Google versão 1.0

Recentemente fiz um post testando a versão beta do plugin e na semana passada saiu a versão 1.0 do plugin. Com uma série de correções e melhorias. Nesse post iremos falar sobre as novidades do plugin em sua versão 1.o.

Plugin oficial do google para web stories

1 – Mudança dos endereços

Umas das mudanças da versão beta para a versão final foi a alteração do URL /stories/ para /web-stories/. O agora todos os seus stories ficarão na pasta web-stories mas isso será mais relevante caso tenha utilizado o plugin na versão beta.

2 -Salvar cores e fontes

Umas dos pontos que tinha até criado uma issue no github era a opção de criar opções pré-definidas para fontes e cores. Agora na versão 1.0 temos a opção de salvar cores estilos de texto.

Opções salvas no editor visual

3 – Melhorias em acessibilidade

Uma série de melhorias relacionadas a acessibilidade foram incluídas nessa versão sempre quando o elemento possui um contexto de acessibilidade uma aba de acessibilidade será exibida no menu de contexto, como podemos ver na imagem a seguir:

Images e vídeos possuem a opção de adicionar texto descritivo

Além de melhorias referentes a conteúdo o editor visual também possui melhorias, como teclas de atalhos e navegação e edição via teclado.

4 – Integração com imagens e vídeos do Unsplash

Imagens e vídeos tem um importante papel da criação do seu web stories ter uma imagem relativa ao seu conteúdo demanda tempo para seleção e upload desse conteúdo. Com o plugin de web stories possui uma integração com o repositório de imagens unsplash.

Integração com o repositório de imagens unsplash

5 – Canal Google Web Creators

Umas das novidades junto com o plugin foi o lançamento do canal Google Web Creators, uma iniciativa para apoiar criadores de conteúdo na Web.

Vídeo de introdução do Google Web Creators

Então essas são as novidades que eu gostaria de listar em breve estará saindo mais um vídeo no canal sobre Web Stories. Caso queira ler mais posts sobre o WordPress acesse a página da categoria.

Categorias
WordPress

Web Stories para WordPress

Stories nos últimos anos se tornou um dos conteúdos mais consumidos no mundo dos dispositivos móveis, formato introduzido pelo Snapchat se popularizou no Instagram e em seguida se espalhou pelo facebook, whatsApp e recentemente foi adicionado no LinkedIn.

Um ponto que todas essas plataformas tem em comum? Elas são plataformas privadas o conteúdo gerado nessas plataformas estão a controle de terceiros. Em fevereiro de 2018 com uma iniciativa de adicionar o recurso a web aberta, AMP lançou stories para web. O recurso está disponível no framework onde você pode criar seus próprios stories para qualquer dispositivo mobile independente do sistema operacional e sem a necessidades da instalação de um App.

Já se passaram dois anos e porque estamos falando de stories só agora? No Google I/O do ano passado tivemos o anúncio da inclusão de web stories nos resultados da busca do Google, esse resultados vão estar disponíveis no Google Images e Discovery(2019 o recurso teve 800 milhões de usuários ativos mensalmente).

Esse anúncio trás um novo significado para o recurso, agora temos uma nova oportunidade de capitalizar usuários de forma orgânica, atualmente o recurso está em formato de teste nos Estados Unidos e será lançado em outras regiões ainda esse ano.

Video de apresentação do web stories no Google I/O 2019

Web Stories é uma incógnita inicialmente alguns portais como Washington Post e CNN estão fazendo uso do recurso. Mas a pergunta é: stories é utilizado em sua maioria em redes sociais, será que o formato irá vingar em caracter informativo?

O plano inicial do Google é utilizar o recursos nas seguintes categorias:

  • Viagens
  • Filmes
  • Receitas
  • Fashion
  • Games
  • Shows de TV

Como criar Web Stories

A implementação dos Stories é em AMP teremos dois caminhos programando ou utilizar um editor visual. Depois de implementado os web stories seu conteúdo precise seguir alguns critérios para isso podemos testar nosso Web Stories com Search Console onde entraremos em mais detalhes a seguir.

Para a criação de web stories com programação vou dedica um post exclusivo para esse post vamos ter uma introdução e ver alguns conceitos relacionados utilizando editores visuais. Os editores visuais temos algumas opções plataformas gratuitas com recursos premium como:

makestories amp stories visual editor

Anteriormente tínhamos o plugin de AMP que tinha como recurso a possibilidade de criar AMP Stories esse recurso foi descontinuado no plugin de AMP oficial e o Google começou a focar em um plugin exclusivo para AMP Stories agora chamadoWeb Stories para WordPress. O plugin está na sua versão beta assim como o Site Kit o Google utilizou a mesma estratégia está utilizando sua base de seguidores para testar o plugin antes do seu lançamento no repositório oficial.

Como mencionei anteriormente o plugin está na versão beta então muita coisa ainda vai mudar e se caso queira testar o plugin saiba que ele ainda não está 100%. O plugin tem previsão para ficar disponível non final do verão nos EUA isso pode ser por meados de Setembro.

Plugin Web Stories for WordPress

Agora vamos falar sobre o plugin, vou realizar um teste aqui no meu blog e monitorar como se comporta a audiência referente aos stories. Para isso vamos instalar o plugin caso estiver lendo esse post após o lançamento do plugin no repositório oficial do WordPress o processo de instalação será diferente.

Mas caso queira instalar a versão beta os passos serão

1. Baixar o zip do plugin no endereço https://google.github.io/web-stories-wp/beta/

Página do plugin versão beta do WebStories

2. Logar no painel do WordPress em que você deseja instalar o plugin

3. Ir na seção plugin no menu lateral esquerdo e selecionar “adicionar novo”

Tela da administração de plugins

4. Na tela de adicionar novo escolher a opção no topo “Enviar plugin” e enviar o zip que acabamos de baixar no site do plugin.

Tela adição de plugins

5.Após o envio clique em “ativar plugin

último passo ativando plugin

6. Quando instalado o menu de stories ficará disponível na sessão Stories no seu menu lateral e ele terá o seguinte visual:

Criando Web Stories com o plugin

Instalei o plugin no meu blog pessoal, para esse post eu criei dois Stories como teste. Quando você clica em adicionar Web Stories a primeira impressão é que você está trabalhando eu outro software, o editor visual com um tema dark como podemos ver na imagem a seguir:

Editor de Web Stories

Primeiro passo foi criar minha primeira história, alguns momentos é difícil de identifica se o elemento na tela é editável ou é apenas uma informação, por exemplo, Rascunho automático é o título do meu stories completo e também vai definir o slug do meu story.

Mas o editor gráfico é completo com várias opções de edição alguns momentos a resposta não é precisa mas normal para um plugin que está na sua versão beta.

Criei dois stories sobre posts antigos em meu blog referente a lista de coisas que aprendi depois que me mudei para Dublin então já tinha o conteúdo a maior parte do trabalho foi achar as imagens. Cada Story contém 6 páginas. Com titulo e descrição a inclusão de texto é livre mas temos alguns items que são relevantes a validação de nosso stories.

Nesse post vamos focar no processo completo de criação de stories. Para o processo de edição de stories melhor material é seria gravar um vídeo com um passo-a-passo. Mas depois que concluímos o nosso Story temos que ficar atento a alguns pontos:

  • Primeiro no menu lateral direito temos os controles sobre o documento, como configurações gerais. Para ter um story válido precisamos de um ícone e uma imagem de cobertura esses itens serão essenciais para busca.
  • Quando completo o processo teremos um permalink para o nosso story em um endereço começando com /stories/, por exemplo : https://blog.fellyph.com.br/stories/5-coisas-que-aprendi-no-meu-primeiro-ano-de-trabalho-na-irlanda/
  • Possivelmente esse processo irá mudar mas na versão beta precisa desse link pra adicionar em nosso bloco Gutenberg como na imagem a seguir:
Exemplo de bloco web stories

Validando suas web stories

Depois de tudo pronto o último passo para verificar se nossos stories são válidos para os cards especiais na busca é validar nossos stories com Search Console https://search.google.com/test/amp, para testar sua web story você precisa somente passar o endereço de sua web story e assim você terá o feedback:

Conclusão

Quando comecei a escrever esse post tinha minhas dúvidas sobre web story após começar a criar stories comecei ver alguns benefícios. Por exemplo no meu blog sempre faço essas listas: “5 coisas que aprendi como…” ou “5 erros comuns na hora de…” e o esforço pra criar esse conteúdo foi mínimo, primeira web story passei 30 min para criar mas desse tempo maior parte foi escolhendo fotos e entendendo a interface do editor visual as seguintes foram mais rápidas em torno de 20 a 15 minutos.

Primeiro conteúdo que veio em mente para os stories foi reciclar meu conteúdo já existente isso pode ser uma boa forma de renovar seu conteúdo dando mais alternativas para os leitores. Por fim vou criar mais alguns stories e esperar um impacto na audiência do meu blog.

Sobre a experiência de edição o plugin está na versão Beta muita coisa ainda não funciona 100%. Mas se o Google colocar o mesmo investimento que fizeram no Site Kit em 3 meses teremos uma versão 100% estável.

Vale a pena investir em Web Stories? Como toda nova tecnologia essa é uma aposta você pode sair na frente da concorrência e assumir os riscos ou esperar ver como o mercado irá reagir e investir com mais segurança mais ai sua concorrência será ainda maior. Particularmente você não tem nada a perder pegue seus posts que não tem aquele desempenho e adicione stories e veja se você tem alguma melhoria no tráfego.

Mais posts sobre acesse a página da categoria WordPress.