Práticas recomendadas para criar Web Stories

Para manter os leitores engajados, siga as práticas recomendadas para criar Web Stories. Recomendamos priorizar as tarefas essenciais. Se você tiver mais tempo, siga também as práticas recomendadas.

Narrativa

Práticas recomendadas essenciais de narrativa
Vídeo em primeiro lugar Vídeos geram mais engajamento que texto ou imagens. Use vídeo tanto quanto puder, e imagens e textos apenas de maneira suplementar.

Mais práticas recomendadas de narrativa

Práticas recomendadas de narrativa
Mostre sua perspectiva Vá além dos fatos. Compartilhe suas opiniões. Protagonize sua própria história. Faça com que os usuários se identifiquem com ela.
Crie um arco narrativo Crie um elemento de suspense entre as páginas da Web Story. Dê contexto e desenvolva a narrativa para incluir o usuário na história. Recompense o visitante por acompanhar até o fim.

Design

Práticas recomendadas essenciais de design
Reduza o número de caracteres Evite incluir várias páginas com texto excessivo. Reduza o texto para aproximadamente 280 caracteres por página, ou seja, o comprimento de um tweet.
Não bloqueie o texto Confira se outros conteúdos não bloqueiam o texto da página. Evite usar texto gravado na imagem para que ele não seja bloqueado quando for redimensionado a fim de se adequar a vários tamanhos de dispositivo.
Mantenha o texto dentro dos limites Verifique se todo o texto da Web Story está visível ao leitor. Evite usar texto gravado na imagem para que ele não exceda as margens quando for redimensionado a fim de se adequar a vários tamanhos de dispositivo.
Use as animações com parcimônia Dê vida às Stories com animações. Evite usar animações repetitivas ou que distraiam o usuário, porque podem causar fadiga.

Mais práticas recomendadas de design

Práticas recomendadas de design
Use calls-to-action específicas para as Web Stories Ao recriar Stories que foram feitas originalmente para uma rede social, como Instagram, Snapchat ou YouTube, remova todas as calls-to-action específicas a essas plataformas. Verifique se os usuários conseguem seguir todas as ações sugeridas na Web Story.
Use vídeos e imagens sem margem Inclua recursos sem margens nas Stories para criar uma experiência mais imersiva para os leitores.
Evite imagens e vídeos distorcidos ou com baixa resolução Use imagens de alta qualidade e tenha cuidado ao redimensionar imagens para a orientação retrato.
Adicione um logotipo à página de abertura Inclua um logotipo de alta resolução que represente a marca.
Reduza a duração do vídeo Recomendamos vídeos com menos de 15 segundos por página ou, no máximo, 60 segundos.
Inclua áudio Use clipes de áudio de alta qualidade com pelo menos 5 segundos de duração e volume normalizado. Confira se é possível escutar a fala.
Use avanço automático para Stories que contenham apenas vídeo A experiência de avanço automático de Web Stories de vídeo pode proporcionar uma experiência descontraída.

SEO

Práticas recomendadas essenciais de SEO
Disponibilize conteúdo de alta qualidade Como qualquer página da Web, o mais importante é disponibilizar conteúdo de alta qualidade que seja útil e interessante para os leitores. Inclua uma história completa e siga as práticas recomendadas de narrativa para mantê-los engajados.
Use um título curto Os títulos precisam ter menos de 90 caracteres. Recomendamos o uso de um título descritivo com menos de 70 caracteres.
Verifique se a Pesquisa Google consegue encontrar a Story Não inclua um atributo noindex na Story. Esse atributo impede que o Google indexe a página e que ela apareça nos resultados. Além disso, adicione as Web Stories ao sitemap. Acesse o Relatório de cobertura do índice e o Relatório de sitemaps do Search Console para verificar se o Google consegue encontrar as Web Stories.
Verifique se a Story é independente Todas as Web Stories precisam ser canônicas. Verifique se cada Web Story tem o atributo link rel="canonical". Por exemplo: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
Anexe os metadados

Verifique se as Web Stories seguem as diretrizes de metadados de histórias em AMP. Inclua marcações que você normalmente incluiria em uma página da Web, como as seguintes:

Mais práticas recomendadas de SEO

Práticas recomendadas de SEO
Inclua dados estruturados Recomendamos a inclusão de dados estruturados na Web Story para ajudar a Pesquisa Google a entender a estrutura e o conteúdo dela.
Inclua texto alternativo nas imagens Recomendamos a inclusão de texto alternativo nas imagens para melhorar a detecção da Story.
Integre Stories ao site

Recomendamos a integração das Web Stories ao site. Para isso, adicione links à página inicial ou às páginas de categorias, se houver. Por exemplo, se a Web Story for sobre um destino de viagem e você tiver uma página que liste todos os artigos sobre esse assunto, crie também links para as Web Stories dessa categoria. Também pode ser uma boa ideia criar outra página de destino especial, como www.example.com/stories. Depois é possível adicionar links a ela de páginas importantes do site, como a página inicial.

Use anexos de página de histórias em AMP Use anexos de página de histórias em AMP para apresentar informações adicionais junto à Web Story. Isso pode ser útil para oferecer mais detalhes, análises aprofundadas ou o caminho de navegação para o conteúdo apresentado nela.
Inclua legendas no vídeo Adicione legendas ao vídeo para ajudar os leitores a compreender melhor a Story. Evite usar legendas gravadas no vídeo para garantir que elas não se sobreponham a outros conteúdos nem saiam da tela.
Otimize Stories que contenham apenas vídeo

Recomendamos o uso de HTML semântico para criar Web Stories. No entanto, é possível que algumas ferramentas do editor de Web Stories exportem cada slide como um arquivo de vídeo que reúne todo o texto no vídeo. Nesse caso, recomendamos que você adicione o texto exato exibido no vídeo como um atributo title do elemento amp-video. Só faça isso se não conseguir usar a marcação semântica nas Web Stories.

Adicione compatibilidade com exibição em modo paisagem A fim de que as Web Stories apareçam nos resultados da Pesquisa Google para computadores, adicione compatibilidade com exibição em modo paisagem.

Técnicas

Práticas recomendadas técnicas essenciais
Valide a Story As Web Stories precisam ser páginas AMP válidas. Para evitar problemas de AMP inválida, teste a story com a ferramenta de validação de AMP e corrija os erros detectados.
Não inclua texto na imagem do pôster Evite usar imagens que contenham texto gravado. Isso pode obstruir o título da story quando os usuários a visualizarem nos resultados da Pesquisa. Se os usuários não conseguirem ver o título claramente, é menos provável que continuem a ler.
Inclua o tamanho da imagem do pôster e a proporção corretos Verifique se a imagem vinculada ao atributo <amp-story> poster-portrait-src tem pelo menos 640 x 853 px e use uma proporção de 3:4.
Inclua a proporção correta para o logotipo Verifique se a imagem do logotipo vinculada ao atributo <amp-story> publisher-logo-src tem pelo menos 96 x 96 px e proporção de 1:1.

Mais práticas recomendadas técnicas

Práticas recomendadas técnicas
Inclua og:image Recomendamos a inclusão de og:image nas suas tags <meta> para melhorar a detecção da Story.

Outros recursos