Estratégias de crescimento para editoras em época de eleições | WEBINAR
Estratégias de crescimento para editoras em época de eleições | WEBINAR
Após ler este guia, você deverá ser capaz de entender como artigos de notícias existentes são modificados e criados usando designs de layout de página que melhoram a capacidade do Google de rastrear e compreender o conteúdo da página.
Duração do vídeo
15:35
Responda ao questionário
Faça o teste do módulo atual
Materiais
Modelos prontos para usar
Recursos
Relatórios e Recursos
2.1.1 O que é design e layout?
O design e o layout do seu site determinam como ele aparece para o usuário final. Isso é importante porque o Google é guiado por uma filosofia que prioriza o usuário. Páginas da web que atendem às necessidades do usuário de forma rápida, eficiente e simples são recompensadas com melhores posições nos resultados de busca.
O design e o layout do seu site também determinam a facilidade com que os mecanismos de busca, como o Googlebot, o rastreiam e indexam. Um design e layout simples e otimizado significam um rastreamento rápido e fácil, o que, por sua vez, se traduz em melhores classificações.
Então, o que impede as editoras de implementarem as melhores práticas de design e diagramação? Na maioria das vezes, as editoras se deparam com os seguintes problemas:
Para responder a essa pergunta, realizamos uma simples busca no Google, digitando as palavras-chave “Notícias sobre Charlie Puth” na barra de pesquisa.
Eis o que os resultados da pesquisa mostraram:
Em segundo lugar no ranking de notícias principais (Secret de Resultados do Google), logo acima de uma matéria da NME, está o artigo do Daily Illini sobre o último lançamento de Charlie Puth.
O fato de o Daily Illini, um jornal estudantil universitário, superar o maior site independente de música do mundo em rankings levanta algumas questões importantes
Como é possível que um jornal estudantil de uma cidade de cerca de 40.000 habitantes no meio-oeste americano esteja à frente do maior site de notícias musicais do mundo? Intrigados, decidimos investigar um pouco mais.
Primeiro, demos uma olhada na página da NME sobre Charlie Puth.
De imediato, a primeira coisa que notamos é o vídeo pop-up tentando carregar no canto inferior direito da tela. Obviamente, ele não está carregando muito bem. O vídeo em buffer também esconde parte da manchete e do corpo da notícia.
Em seguida, notamos que a área visível inicial está ocupada principalmente por elementos irrelevantes para a notícia. Há um grande banner publicitário cobrindo cerca de metade da página e, claro, o vídeo.
Na verdade, ao rolar a página para baixo, encontramos mais vídeos, mais imagens grandes e ricas em detalhes, mais anúncios pop-up e muitos hiperlinks. Dada a quantidade de conteúdo multimídia na página, não surpreende que tenha demorado bastante para carregar.
Em seguida, analisamos o Daily Illini e aqui está o que encontramos.
A página é organizada, limpa e sem elementos desnecessários. Ela contém alguns anúncios e um grande botão de Doação no topo, mas não há vídeos ou pop-ups cobrindo a área visível ou obstruindo a manchete da notícia. Podemos ver a manchete imediatamente, e é muito provável que o mesmo aconteça com o mecanismo de busca do Google.
De forma geral, a página é leve, minimalista e carrega muito rapidamente.
Decidimos dar uma olhada mais aprofundada no código subjacente. Clicando com o botão direito na página e selecionando "Exibir código-fonte" (no Chrome), podemos ver o código da página.
Isto é o que vimos na página da NME:
Duas coisas chamaram nossa atenção aqui:
Isso não é o ideal para uma página por dois motivos:
Por outro lado, quando analisamos o código da página Daily Illini, vimos o seguinte:
Este é um código HTML muito simples. Além disso, não há scripts sendo executados dentro dele.<head> seção.
Como é que tudo isso explica o Daily Illini ter superado a NME no ranking?
Provavelmente, vários fatores estão em jogo aqui, e um deles é o design e o layout. A página do Daily Illini utiliza certas técnicas de design e layout que até mesmo pequenos editores podem facilmente replicar para impulsionar sua estratégia geral de SEO.
Isso inclui usar código HTML limpo e simples, evitar scripts na seção de cabeçalho, manter a página leve e com carregamento rápido e não depender muito de pop-ups e anúncios intersticiais.
O guia abaixo analisa cada um desses pontos em detalhes, além de explicar diversas outras técnicas que você pode implementar para melhorar significativamente seu posicionamento nos resultados de busca.
A semântica relaciona-se com o significado das palavras. As tags HTML semânticas são aquelas que definem claramente seus significados tanto para o leitor quanto para um mecanismo de busca da web.
Por exemplo, quando usamos uma tag como<header> , sabemos o que ele contém — informações sobre o cabeçalho.
De forma similar<h1> É uma etiqueta semântica que informa ao Googlebot que o que se segue é o título mais importante do artigo.
Em contraste, quando usamos uma tag como<div> , seu significado não é imediatamente aparente. Em HTML<div> Significa divisão e implica apenas que uma nova seção de código foi iniciada, sem necessariamente revelar qualquer informação sobre o conteúdo dessa seção.
Mecanismos de busca como o Googlebot são construídos usando inteligência artificial e algoritmos de aprendizado de máquina que tentam simular o funcionamento do cérebro humano. Isso significa que eles interpretam o texto de maneira muito semelhante à do cérebro humano.
O código HTML que é fácil de entender para humanos também deve ser fácil de entender para o rastreador da web do Google.
Como exemplo, considere os dois trechos de código HTML abaixo:
Fonte: https://www.pluralsight.com/guides/semantic-html
Esta página utiliza o<div> A tag `<header>` abrange tudo, desde o cabeçalho até o conteúdo principal e o rodapé. A leitura das tags não deixa imediatamente claro qual é o seu conteúdo.
Em contraste, a página abaixo usa marcação semântica. O cabeçalho está localizado dentro do<header> tag, o rodapé dentro do<footer> a tag, e o corpo principal do artigo vai dentro da<main> marcação.
Fonte: https://www.pluralsight.com/guides/semantic-html
Como este conteúdo é fácil de ler e entender para o Googlebot, esta página tem uma chance maior de ficar em uma posição mais alta nos resultados de busca do que a anterior, considerando todos os outros fatores iguais.
Para verificar se sua página usa marcação semântica, basta clicar com o botão direito do mouse na página (se estiver usando o Google Chrome) e clicar em "Inspecionar". Você poderá ver o código-fonte HTML da página. Elementos semânticos comuns incluem:<author> ,<video> ,<article> ,<form> ,<header> , etc.
Agora sabemos o que é Marcação Semântica e por que ela é importante. Mas como podemos usá-la para melhorar o SEO?
É simples: use sempre marcação semântica para destacar informações importantes sobre o design e o layout do seu artigo. Isso inclui as seguintes informações do artigo:
Garanta que o layout da sua página esteja bem organizado para melhorar a indexação pelos mecanismos de busca
Você está projetando seu site para ser lido tanto por humanos quanto por mecanismos de busca, e, portanto, seu design e layout devem refletir esse fato.
Abaixo, seguem algumas dicas para ajudá-lo a alcançar resultados mensuráveis para o seu site.
Você pode usar HTML, CSS, Javascript ou qualquer outra linguagem de front-end para criar páginas ricas e interativas. No entanto, lembre-se de que quanto mais avançada a linguagem, maior a sua complexidade e maiores as chances de um mecanismo de busca encontrar dificuldades para lê-la, interpretá-la e compilá-la.
Embora o código HTML possa não ser o mais bonito visualmente, ele carregará mais rápido e será mais otimizado para mecanismos de busca, simplesmente porque estes conseguem lê-lo e compreendê-lo mais rapidamente.
Considere o HTML puro como o esqueleto da sua página web. Você pode adicionar CSS e Javascript para dar corpo a ele e torná-lo visualmente agradável e dinâmico, mas é melhor manter o conteúdo mais importante dentro do esqueleto em vez de adicioná-lo ao código principal.
Então, como implementamos HTML puro? Uma maneira simples de fazer isso é colocar o corpo principal do seu conteúdo dentro de um elemento `<div>`.<article> Tags HTML.
Dessa forma, quando os rastreadores da web encontrarem o<article> Ao usar a tag, os mecanismos de busca sabem imediatamente que o conteúdo seguinte é o mais importante da sua página — o artigo de notícias. Isso ajuda o mecanismo de busca a entender que o conteúdo dentro dessa tag precisa ter maior peso.
HTML puro<article> A tag é um marcador semântico que se parece com isto:
Fonte: https://en.wikipedia.org/wiki/Article_element
A próxima pergunta óbvia é: se eu estiver usando um CMS como o WordPress, onde devo inserir essas tags?
Como fazer isso: Se você estiver criando um site personalizado usando HTML, pode verificar o código-fonte para garantir que ele esteja usando HTML puro, principalmente em áreas críticas. Recomendamos conversar em mais detalhes com um desenvolvedor para garantir que você não comprometa a funcionalidade acidentalmente.
Se você usa o WordPress, consulte este guia . Você também pode achar este guia sobre como inserir HTML em posts e páginas uma fonte de referência útil.
Estas instruções são para o WordPress, pois o WordPress continua sendo o CMS mais popular entre os editores. Se você estiver usando um CMS diferente, como o Wix, consulte a página de suporte ou a documentação do seu CMS.
Se você tiver acesso a uma equipe de desenvolvedores web, o ideal é que eles façam isso, pois editar o código HTML pode ser demorado.
Faça testes para garantir que seu conteúdo seja exibido corretamente em todos os navegadores, dispositivos e tamanhos de tela. Este ponto é mais óbvio, mas frequentemente negligenciado. Se o seu conteúdo não for exibido da maneira desejada em todos os navegadores e dispositivos, isso afetará a experiência do usuário e, a longo prazo, seu posicionamento nos resultados de busca.
Como fazer isso: Para testar o conteúdo em diferentes plataformas, você precisa abrir sua página em diferentes dispositivos e navegadores para ver como ela está sendo exibida.
No mínimo, você deve testar o seguinte:
As marcações HTML ajudam a destacar os diferentes elementos da sua página. Os dados estruturados ajudam os mecanismos de busca a ler o conteúdo dos diferentes elementos da sua página e a compreendê-lo melhor.
Dados estruturados são simplesmente uma série de instruções escritas em uma linguagem simples, como JSON-LD, que podem ser inseridas no código HTML existente da sua página web. Pense nisso como uma meta descrição, mas para itens individuais de conteúdo na sua página.
No exemplo abaixo, os dados estruturados ajudam o Google a identificar cinco atributos sobre uma página da dbpedia sobre John Lennon:
Fonte: https://json-ld.org/
Como você pode ver, o código está em uma linguagem simples, fácil de ser compreendida tanto por um leitor humano quanto por um mecanismo de busca da web.
Aqui está outro exemplo que mostra como os dados estruturados podem ser integrados diretamente ao código HTML existente da sua página web. As instruções para dados estruturados estão destacadas em verde.
Fonte: developers.google.com
Neste exemplo, os dados estruturados informam ao Googlebot que esta é uma página de receita de bolo de café de alguém chamada Mary Stone.
Utilizar dados estruturados no layout do seu site proporciona resultados mensuráveis. Por exemplo, o uso de dados estruturados pode aumentar a taxa de cliques (CTR) de um site em até 30%.
O uso de dados estruturados também ajuda sua página a ter uma classificação melhor nos carrosséis, snippets em destaque, vídeos e painéis de informações do Google.
Para SEO no Google Notícias, é importante incluir os seguintes elementos ao criar dados estruturados para agregar valor:
Como fazer isso: Você pode adicionar dados estruturados/esquema ao seu conteúdo manualmente ou usando um plugin para o seu CMS específico.
Todos os elementos do seu artigo de notícias devem ser organizados em uma ordem específica para permitir uma indexação mais rápida e fácil. A ordem é a seguinte:
A experiência da página mede como os usuários interagem com a sua página. O Google possui um conjunto de parâmetros para quantificar essa experiência. Dedicamos um módulo inteiro aos fatores de experiência da página , portanto, aqui, abordaremos cada um deles brevemente.
Como fazer isso: Você pode testar a experiência da página manualmente ou usando plugins ou aplicativos de terceiros. Por exemplo, o PageSpeed Insights é uma ferramenta prática que ajuda a analisar o desempenho do seu site com base no CWV (Current Page Speed Value) e outros parâmetros, atribuindo uma pontuação de acordo com essa análise. Ele também testa a responsividade em dispositivos móveis e desktops.
Editores de notícias não devem publicar vários artigos de notícias sob o mesmo URL. Isso impedirá o Google de indexá-los. Cada artigo de notícia deve ter seu próprio URL exclusivo.
Além disso, esses URLs devem ser permanentes. Isso significa que a mesma notícia deve ser exibida em um URL específico. Se a notícia associada a um determinado URL mudar com frequência, o Google não conseguirá rastreá-la e indexá-la. Os editores devem, no entanto, atualizar a notícia sempre que necessário.
Caso seja necessário utilizar redirecionamentos para artigos de notícias, eles devem ser implementados de acordo com as seguintes boas práticas:
Embora as ações listadas nesta seção não sejam tão importantes quanto as anteriores, ainda recomendamos implementar o máximo possível delas assim que os pontos críticos da missão listados acima forem resolvidos.
O<head> O elemento de uma página contém informações importantes sobre a página que não são exibidas diretamente nela. Inclui metadados que ajudam o Googlebot a identificar e classificar o conteúdo da página.
Em regra geral, o<head> O elemento deve incluir apenas as tags mais importantes e nada mais, para que uma postagem possa ser rastreada e renderizada corretamente. Estas incluem:
Qualquer outra coisa contida dentro do<head> É provável que esse elemento confunda os mecanismos de busca da web.
Por exemplo, é comum que os novatos confundam a tag de título com<h1> e coloque este último dentro do<head> elemento. Como explicado anteriormente, o<head> O elemento só pode conter metadados que não são exibidos na página.
Embora o título e<h1> Devem conter essencialmente as mesmas informações; as primeiras são metadados destinados a rastreadores da web e a serem exibidos nos resultados da SERP e na guia do navegador, enquanto as segundas são informações a serem exibidas na página.
O código abaixo mostra como inserir o título dentro do<head> elemento.
Fonte: developer.mozilla.org
Utilizar elementos da página que facilitem a leitura do conteúdo e tornem a navegação uma experiência fluida para o usuário também impacta o SEO.
Uma página de fácil navegação conterá estes elementos:
A menos que você seja um desenvolvedor web experiente, é melhor consultar um especialista sobre a melhor maneira de implementar uma experiência do usuário amigável.
O Google quer que os editores exibam anúncios sem interromper a experiência do usuário. Por esse motivo, pode penalizar sites que exibem muitos anúncios intrusivos. Embora a experiência do usuário seja uma métrica subjetiva, o Google tem certas diretrizes e práticas recomendadas em relação aos anúncios.
Algumas delas se relacionam com:
Para mais informações sobre anúncios e pop-ups, consulte nosso módulo detalhado .
O Javascript é ótimo para criar conteúdo dinâmico e interativo, mas os mecanismos de busca da web podem ter dificuldade em renderizá-lo.
Isso ocorre porque:
Em artigos de notícias, é uma boa prática evitar interrupções como carrosséis de artigos relacionados ou galerias de imagens.
Muitos editores bem-sucedidos ficam preocupados ao relançar/redesenhar seus sites, pois isso exige que o Google os rastreie novamente. Siga estas boas práticas para garantir uma transição tranquila para a normalidade após o relançamento/redesenho:
Mantenha as páginas dos seus artigos o mais leves possível. Já falamos sobre evitar o uso de Javascript nos artigos, mas também é uma boa prática evitar conteúdo HTML pesado.
Isso ocorre porque, quando o Googlebot rastreia sua página, ele só pode baixar um máximo de 15 MB de dados na primeira indexação. Para a maioria das páginas, isso não é um grande problema, pois itens pesados, como vídeos e imagens, são referenciados separadamente no código que o Googlebot indexa posteriormente e, portanto, estão fora do alcance desse limite de 15 MB.
No entanto, isso reforça o fato de que quanto mais leve for a sua página, mais fácil será para o Googlebot rastreá-la e indexá-la.
Dica: Se você quiser verificar o tamanho da sua página, acesse as Ferramentas do Desenvolvedor do seu navegador, mude para a aba Rede e recarregue a página. Isso exibirá todas as requisições que seu navegador fez para renderizar a página completamente. A primeira requisição dessa lista mostra o tamanho da sua página na coluna Tamanho. Para a maioria das páginas na internet, esse valor geralmente é em kilobytes.
Os snippets de artigos oferecem aos leitores uma prévia do conteúdo da página antes que eles cliquem nela. O Google determina o snippet correspondente a cada artigo rastreando o texto no corpo principal do artigo, logo abaixo do título.
Para evitar a possibilidade do Googlebot incluir trechos incorretos, certifique-se de que:
Às vezes, o Googlebot pode não indexar sua imagem ou indexar uma imagem diferente daquela que você pretendia usar com seu artigo. Para evitar isso, siga estas boas práticas:
O Googlebot usa o título do seu artigo para identificá-lo e indexá-lo corretamente. Siga estas boas práticas para garantir que ele leia o seu título corretamente:
Vamos analisar dois estudos de caso de sites que já implementaram as etapas discutidas neste artigo.
Os sites de notícias modernos são complexos e ricos em conteúdo, e seria irrealista esperar que eles seguissem essas diretrizes rigorosamente. No entanto, nesta seção, buscamos demonstrar como seguir as diretrizes pode resultar em resultados previsíveis e mensuráveis.
O Manly Observer é um site de notícias hiperlocal voltado para o público de um popular bairro litorâneo de Sydney, na Austrália. Abaixo, você pode ver como é um artigo típico do site:
Os seguintes elementos de design ficam claros e presentes à primeira vista:
Analisando agora o código HTML da página, podemos observar o uso de marcação semântica.
Este é um código facilmente legível por um humano. É seguro presumir que um rastreador da web será capaz de ler e interpretar este código com igual facilidade.
O site utiliza o protocolo https:// e não exibe anúncios pop-up ou intersticiais na área visível da tela.
A Entrepreneur é uma revista popular para empreendedores e empresas. Esta é a aparência da sua página inicial.
O site carrega muito rápido e não há anúncios pop-up ou vídeos na página inicial. A maior parte da publicidade ocorre nos artigos de notícias individuais.
Ao clicarmos em “exibir código-fonte”, vemos o seguinte código HTML:
À primeira vista, podemos inferir o seguinte a partir deste código:
Ao rolar a página para baixo, vemos o seguinte elemento de código:
Já discutimos o uso de schema.org e Opengraph (OG) para imagens. Recapitulando, schema.org e OG são tipos de dados estruturados que ajudam os rastreadores da web a identificar elementos específicos do código com mais facilidade. Vemos o schema.org e o OG implementados aqui.
Mais abaixo, também vemos tags de dados estruturados, como mostrado abaixo:
Assim como no exemplo anterior, o entrepreneur.com também utiliza o esquema https:// em seu link, não possui intersticiais ou pop-ups intrusivos e carrega rapidamente. Os artigos de notícias seguem um formato definido de título, imagem, atribuição de autoria, data e corpo principal do conteúdo. Isso resulta em uma melhor experiência do usuário na página e, consequentemente, em um SEO técnico aprimorado.
Após concluir esta lição, você deverá ser capaz de revisar e atualizar páginas de notícias existentes para otimizar seu design e layout, de forma a estar em conformidade com as melhores práticas de SEO técnico.
Ativo agora
Veja mais
