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">
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
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.
Ativar Web Stories na Pesquisa Google:
é um guia voltado aos desenvolvedores sobre como criar Web Stories que atendam às diretrizes técnicas necessárias
para exibição na Pesquisa Google.
