Táticas de crescimento de editores para época eleitoral | WEBINÁRIO
Táticas de crescimento de editores para época eleitoral | WEBINÁRIO
Depois de ler este guia, você será capaz de entender como os 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
Responder ao questionário
Faça um teste atual do módulo
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 será exibido para o usuário final. Isso é importante porque o Google é, em última análise, movido por uma filosofia que prioriza o usuário. As páginas da Web que satisfazem as necessidades do usuário primeiro, da maneira mais rápida e simples possível são recompensadas com classificações SERP mais altas.
O design e o layout do seu site também determinam a facilidade com que os rastreadores da web, como o bot do Google, o rastreiam e indexam. Um design e layout simples e otimizados significam rastreamento rápido e fácil, o que por sua vez se traduz em melhores classificações.
Então, o que impede os editores de implementar as melhores práticas de design e layout? Na maioria das vezes, os editores são confrontados com estes pontos problemáticos:
Para responder a essa pergunta, realizamos uma pesquisa simples no Google inserindo as palavras-chave “Charlie Puth News” na barra de pesquisa.
Aqui está o que os resultados da pesquisa apareceram:
Em segundo lugar no ranking SERP de notícias principais, logo acima de uma história da NME, está o artigo do Daily Illini sobre o último lançamento de Charlie Puth.
O facto de o Daily Illini, um jornal estudantil universitário, superar o maior site independente de música do mundo, levanta algumas questões importantes
Como é que um jornal estudantil numa cidade de cerca de 40.000 habitantes no centro-oeste americano supera o maior site de notícias musicais do planeta? Intrigados, decidimos cavar um pouco mais.
Primeiro verificamos a página da NME sobre Charlie Puth.
Logo de cara, a primeira coisa que notamos é o vídeo pop-up que tenta carregar no canto inferior direito da tela. Obviamente, não está fazendo um bom trabalho de carregar. O vídeo em buffer também esconde parte da manchete de notícias e seu corpo.
Em seguida, notamos que a viewport inicial é ocupada principalmente por coisas que não são relevantes para a notícia. Há um grande anúncio de banner cobrindo cerca de metade da página e, é claro, há o vídeo.
De fato, rolando a página, encontramos mais vídeos, mais imagens grandes e ricas, mais anúncios pop-up e muitos hiperlinks. Dado o quão rica em mídia é a página, surpreendentemente demorou um bom tempo para carregar.
Em seguida, inspecionamos o Daily Illini e aqui está o que encontramos.
A página é arrumada, limpa e organizada. Ele tem sua parcela de anúncios e um grande botão de doação na parte superior, mas não há vídeos ou pop-ups cobrindo a viewport ou obstruindo a manchete das notícias. Podemos ver a manchete imediatamente, e é muito provável que o mesmo se aplique ao rastreador da web do Google.
No geral, a página é leve, minimalista e um raio rápido para carregar.
Decidimos espiar um pouco mais do capô no código subjacente. Ao clicar com o botão direito do mouse na página e selecionando a origem da exibição (enquanto estiver usando o Chrome), podemos ver o código da página.
É isso que vimos para a página da NME:
Duas coisas chamaram nossa atenção aqui:
Esta não é a melhor coisa para uma página por dois motivos:
Quando analisamos o código da página Daily Illini, por outro, vimos isso:
Este é um código HTML muito simples. Além disso, não há scripts em execução no<head> seção.
Como tudo isso se resume ao diário Illini que está ultrapassando a NME?
Provavelmente, existem vários fatores em ação aqui, e um deles é o design e o layout. A página Daily Illini implanta certas técnicas de design e layout que até pequenos editores podem replicar facilmente para aumentar sua estratégia geral de SEO.
Isso inclui o uso de código HTML limpo e simples, evitar scripts na seção de cabeçalho, manter a página leve e rápida para carregar e não confiar muito em pop-ups e anúncios intersticiais.
O guia abaixo passa a cada um deles em detalhes, ao mesmo tempo em que explica várias outras técnicas que você pode implementar para melhorar significativamente suas classificações SERP.
A semântica se relaciona com o significado das palavras. As tags HTML semânticas são aquelas que definem claramente seus significados para o leitor e um rastreador 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.
Por outro lado, quando usamos uma tag como<div> , seu significado não é imediatamente aparente. Em html<div> significa divisão, e tudo o que implica é que uma nova seção de código começou, sem necessariamente revelar nenhuma informação sobre o conteúdo desta seção.
Rastreadores da Web como o GoogleBot são construídos usando algoritmos de inteligência artificial e aprendizado de máquina que tentam simular o funcionamento do cérebro humano. Isso significa que eles entendem o texto da mesma maneira que o cérebro humano.
O código HTML que é fácil para os seres humanos entender também deve ser fácil para o rastreador da web do Google entender.
Como exemplo, considere as duas peças do código HTML abaixo:
Fonte: https://www.pluralsight.com/guides/seemantic-html
Esta página usa o<div> Tag para tudo, do cabeçalho ao conteúdo principal e ao rodapé. Não é imediatamente aparente lendo as tags qual é o seu conteúdo.
Por outro lado, a página abaixo usa marcação semântica. O cabeçalho é colocado dentro do<header> tag, o rodapé dentro do<footer> tag, e o corpo principal do artigo está dentro do<main> marcação.
Fonte: https://www.pluralsight.com/guides/seemantic-html
Como isso é fácil para o Googlebot ler e entender, esta página tem uma chance melhor de classificar mais alto que a anterior, sendo todas as outras coisas iguais.
Para ver se sua página usa marcação semântica, basta clicar com o botão direito do mouse na página se você estiver usando o Google Chrome e clique em Inspecionar. Você poderá ver o código -fonte HTML da página. Elementos semânticos comuns incluem<author> , Assim,<video> , Assim,<article> , Assim,<form> , Assim,<header> , etc.
Agora sabemos o que é marcação semântica e por que é importante. Mas como usamos para melhorar o SEO?
É simples - sempre use a marcação semântica para marcar informações importantes sobre o design e o layout do seu artigo. Isso inclui as seguintes informações do artigo:
Certifique-se de que o layout da sua página seja bem ordenado para melhorar o rastreamento
Você está projetando seu site para ser lido por humanos e rastreadores da web e, como tal, seu design e layout devem refletir esse fato.
Abaixo estão algumas dicas para ajudá -lo a obter resultados mensuráveis para o seu site.
Você pode usar HTML, CSS, JavaScript ou qualquer outro idioma de front -end para criar páginas ricas e interativas. No entanto, lembre -se de que quanto mais avançada o idioma, maior sua complexidade e maiores chances são de que um rastreador da web possa achar difícil ler, interpretar e compilar.
Qualquer coisa codificada no HTML pode não ser a mais bonita de se olhar, mas ele carregará mais rápido e será mais otimizado para os mecanismos de pesquisa pela simples razão de que os mecanismos de pesquisa podem ler e entendê -lo mais rapidamente.
Pense em HTML simples como o esqueleto de ossos nus da sua página da web. Você pode adicionar CSS e JavaScript para desenvolvê -lo e fazer com que pareça esteticamente agradável e dinâmico, mas seria melhor manter o conteúdo mais importante dentro do esqueleto, em vez de colocá -lo na carne.
Então, como implementamos HTML simples? Uma maneira simples de fazer isso é colocar o corpo principal do seu conteúdo dentro<article> Tags html.
Dessa forma, quando os rastreadores da web encontram o<article> Tag, eles sabem imediatamente que o que se segue é o conteúdo mais importante em sua página - o artigo de notícias. Isso ajuda o mecanismo de pesquisa a entender que o conteúdo envolvido nessa tag precisa receber maior peso.
HTML simples<article> TAG é um marcador semântico que se parece com o seguinte:
Fonte: https://en.wikipedia.org/wiki/article_element
A próxima pergunta óbvia? Se estou usando um CMS como o WordPress, onde insiro essas tags?
Como fazer isso: se você estiver construindo um site personalizado usando HTML, poderá verificar o código -fonte para garantir que ele esteja usando HTML simples, especialmente em áreas críticas. Aconselharíamos falar com mais detalhes com um desenvolvedor para garantir que você não prejudique a funcionalidade por acidente.
Se você estiver usando o WordPress, consulte este guia . Você também pode encontrar este guia sobre como inserir html em postagens e páginas uma fonte de referência útil.
Essas instruções são para o WordPress, pois o WordPress continua sendo o CMS mais popular para os editores. Se você estiver usando um CMS diferente, como o WIX, consulte a página de suporte ou documentação para o seu CMS.
Se você tiver acesso a uma equipe de desenvolvedores da Web, é melhor fazê -los fazê -lo como edição do código HTML, pode ser demorado.
Teste para garantir que seu conteúdo apareça corretamente em todos os navegadores, dispositivos e tamanhos. Este é mais óbvio, mas muitas vezes esquecido. Se o seu conteúdo não aparecer da maneira que você deseja em todos os navegadores e dispositivos, isso afetará a experiência do usuário e, a longo prazo, seus rankings SERP.
Como fazer isso: para testar o conteúdo entre as plataformas, você precisa abrir sua página em diferentes dispositivos e em diferentes navegadores para ver como ela está sendo renderizada.
No mínimo, você deve testar o seguinte:
As marcas HTML ajudam a destacar os diferentes elementos da sua página. Os dados estruturados ajudam os mecanismos de pesquisa a ler o que está dentro dos diferentes elementos da sua página e a entender melhor seu conteúdo.
Os dados estruturados são simplesmente uma série de instruções escritas em um idioma simples, como o JSON-LD, que podem ser inseridas no código HTML existente da sua página da web. Pense nisso como uma meta descrição, mas para conteúdo individual em sua página.
No exemplo abaixo, os dados estruturados ajudam o Google a identificar cinco atributos sobre uma página da DBpedia em John Lennon:
Fonte: https://json-ld.org/
Como você pode ver, o código está em linguagem simples que é fácil para um leitor humano e um rastreador da web de entender.
Aqui está outro exemplo que mostra como os dados estruturados podem se encaixar diretamente no código HTML existente da sua página da web. As instruções de dados estruturadas são destacadas em verde.
Fonte: desenvolvedores.google.com
Neste exemplo, os dados estruturados dizem ao Googlebot que esta é uma página de receita sobre o bolo de café, alguém chamado Mary Stone.
O uso de dados estruturados no layout do seu site oferece resultados mensuráveis. Por exemplo, o uso de dados estruturados pode aumentar a taxa de cliques de um site (CTR) em até 30%.
O uso de dados estruturados também ajuda a sua página a classificar melhor nos carrosséis do Google, trechos em destaque, vídeos e recursos do painel de conhecimento.
Para o Google News SEO, é importante incluir os seguintes elementos ao criar dados estruturados para fornecer valor adicional:
Como fazer isso: você pode adicionar dados/esquema estruturado ao seu conteúdo manualmente ou usando um plug -in para seu CMS específico.
Todos os elementos do seu artigo de notícias devem ser organizados em uma ordem específica para permitir rastejamento mais rápido e fácil. A ordem é a seguinte:
A experiência da página é uma medida de como os usuários experimentam sua página. O Google tem um conjunto de parâmetros para quantificar a experiência da página. Dedicamos um módulo inteiro aos fatores de experiência da página , então apenas examinaremos brevemente cada um aqui.
Como fazer isso: você pode testar a experiência da página manualmente e usando plugins ou aplicativos de terceiros. Por exemplo, o Page Speed Insights é uma ferramenta útil que ajuda a analisar o desempenho do seu site com base no CWV e em outros parâmetros e atribui uma pontuação com base em sua análise. Ele também testa a capacidade de resposta móvel e de mesa.
Os editores de notícias não devem publicar vários artigos de notícias no mesmo URL. Isso obstruirá o Google de indexá -los. Cada artigo de notícias deve ter seu próprio URL único.
Além disso, esses URLs devem ser permanentes. O que significa que a mesma notícia deve ser exibida em um URL específico. Se a notícia associada a um URL específico mudar com frequência, o Google não poderá rastejar e indexá -lo. Os editores devem, no entanto, atualizar a notícia o tempo que for necessário.
Se os redirecionamentos precisarem ser usados para artigos de notícias, eles devem ser implementados de acordo com as seguintes práticas recomendadas:
Embora os itens de ação listados nesta seção não sejam tão importantes quanto os acima, ainda recomendamos a implementação do maior número possível de pontos, uma vez que os pontos de missão crítica listados acima fossem abordados.
O<head> O elemento de uma página contém informações importantes sobre a página que não é realmente exibida na página. O que inclui é os metadados que ajudam o Googlebot a identificar o conteúdo da página e classificá -lo.
Como regra, o<head> O elemento deve incluir apenas as tags mais importantes e nada mais, para que uma postagem possa ser rastejada e renderizada corretamente. Estes incluem:
Qualquer outra coisa contida no<head> É provável que o elemento confunda rastreadores da web.
Por exemplo, é comum que novatos confundam a tag title 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> deve conter essencialmente as mesmas informações: o primeiro são metadados destinados aos rastreadores da web e para serem exibidos nos resultados do SERP e na guia do navegador, enquanto o último são informações a serem exibidas na página.
O código abaixo mostra como colocar o título dentro do<head> elemento.
Fonte: desenvolvedor.mozilla.org
O uso de elementos da página que facilita a digitalização do conteúdo e tornam a navegação uma experiência sem atrito para o usuário também afeta o SEO.
Uma página fácil de navegar conterá estes elementos:
A menos que você seja um desenvolvedor da Web experiente, é melhor consultar um especialista na melhor maneira de implementar um UX fácil de usar.
O Google quer que os editores exibam anúncios sem interromper a experiência do usuário. Por esse motivo, ele pode penalizar sites que exibem muitos anúncios intrusivos. Embora a experiência do usuário seja uma métrica subjetiva, o Google possui certas diretrizes e práticas recomendadas quando se trata de anúncios.
Alguns deles se relacionam com:
Para mais informações sobre anúncios e pop -ups, consulte o nosso módulo detalhado .
O JavaScript é ótimo para criar conteúdo dinâmico e interativo, mas os rastreadores da Web podem ter dificuldade em renderizá -lo.
Isso é porque:
Com os artigos de notícias, é uma boa prática evitar interrupções, como carrosséis de artigos relacionados ou galerias de imagens.
Muitos editores que se preocupam bem se preocupam ao relançar/redesenhar seu site, pois exige que o Google recreva o site. Siga estas melhores práticas para garantir uma transição suave para o normal após o redesenho/relançamento:
Mantenha as páginas do seu artigo o mais leve possível. Já vimos evitar o JavaScript em artigos, mas também é uma boa prática evitar o uso de conteúdo HTML pesado.
Isso ocorre porque, quando o Googlebot rasteja sua página, ele pode baixar apenas um máximo de 15 MB de dados de página no primeiro rastreamento. Para a maioria das páginas, esse não é um problema importante, pois itens de peso pesado, como vídeos e imagens, são referenciados separadamente dentro do código que o Googlebot indexa posteriormente e, portanto, estão além do alcance desse limite de 15 MB.
No entanto, isso mais uma vez aponta para o fato de que quanto mais leve sua página, mais fácil será para o Googlebot rastejar e indexá -lo.
Dica: se você deseja verificar o tamanho da sua página, vá para a página Ferramentas do desenvolvedor do seu navegador, mude para a guia Rede e recarregue a página. Isso exibe todas as solicitações que seu navegador fez para renderizar completamente a página. A primeira solicitação nesta lista mostra o tamanho da sua página na coluna de tamanho. Para a maioria das páginas na Internet, esse número geralmente está em Kilobytes.
Os trechos de artigo dão aos leitores uma prévia do conteúdo da página antes de clicar nele. O Google determina o snippet para ir com cada artigo rastejando o texto no corpo principal do artigo logo abaixo do título.
Para evitar a possibilidade do Googlebot, incluindo trechos incorretos, verifique se:
Às vezes, o Googlebot pode não indexar sua imagem ou indexar uma imagem diferente daquela que você pretendia apresentar com seu artigo. Para evitar isso, siga estas melhores práticas:
O GoogleBot usa o título do seu artigo para identificá -lo e indexá -lo corretamente. Use estes seguintes práticas recomendadas para garantir que lê seu título com precisão:
Vejamos 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, e seria irrealista esperar que eles aderem a essas diretrizes rigorosamente. No entanto, nesta seção, estamos tentando demonstrar como seguir as diretrizes pode resultar em resultados previsíveis e mensuráveis.
O Manly Observer é um site de notícias hiperlocais que atende ao público em um popular subúrbio de Sydney, na Austrália. Abaixo está como é um artigo de notícias típico no site:
Vemos os seguintes elementos do design claros e presentes à primeira vista:
Olhando ao lado do código HTML da página, podemos ver o uso da marcação semântica.
Este é o código que é facilmente legível por um humano. É seguro presumir que um rastreador da web poderá ler e interpretar esse código com igual facilidade.
O site usa o esquema https: // e não possui anúncios pop-up ou carregamento intersticial na viewport inicial.
O empresário é uma revista popular para empreendedores e empresas. É assim que sua página inicial aparece.
O site é um raio rápido para carregar e não há anúncios pop-up ou vídeos na própria página inicial. A maior parte da colocação de anúncios ocorre em artigos de notícias individuais.
Quando clicamos para "visualizar a fonte", vemos o seguinte código HTML:
À primeira vista, podemos entender o seguinte a partir deste código:
Ao rolar para baixo, vemos o seguinte elemento de código:
Discutimos o uso de schema.org e opengraph (OG) para imagens. Para recapitular, 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 Schema.org e OG implementados aqui.
Mais abaixo, também vemos tags de dados estruturados, como mostrado abaixo:
Como no nosso exemplo anterior, o Entrepreneur.com também usa o esquema https: // em seu link, não possui intersticiais ou pop-ups disruptivos e é rápido para carregar. Os artigos de notícias seguem um formato definido de título, imagem, atribuição do autor, data e principal corpo de conteúdo. Isso resulta em uma melhor experiência de página e, portanto, melhorou o SEO técnico.
Depois de trabalhar nesta lição, você poderá revisar e atualizar as páginas de notícias existentes para otimizar seu design e layout para aderir às melhores práticas técnicas de SEO.
Ativo agora
Ver mais
