Aplicações de página única (SPAs) em SEO

A Internet e a forma como as pessoas a utilizam estão em constante mudança. É aqui que os especialistas em SEO têm de responder constantemente, criando experiências interactivas em linha. Isto pode ser feito, por exemplo, através da utilização de aplicações de página única (SPA).

Os SPAs permitem que o utilizador veja o conteúdo de um sítio Web de forma dinâmica, mas na realidade o sítio Web consiste apenas numa página. Desta forma, o tempo de carregamento é reduzido e o utilizador pode deslocar-se mais rapidamente.

A utilização de SPA oferece muitas vantagens, mas também levanta questões em termos de SEO. A utilização óptima dos SPA deve procurar um equilíbrio entre a compreensão criativa da experiência do utilizador e os conhecimentos técnicos. Neste artigo, abordo estas questões e explico como a utilização de SPAs pode garantir melhores resultados de pesquisa para obter uma classificação mais elevada no Google.

O significado de SPA

A SPA – também conhecida como Single-Page Application – é uma grande inovação no mundo online que oferece uma forma diferente de navegação. Em vez dos sítios Web tradicionais divididos em títulos com novas páginas por baixo, a SPA apresenta todo o conteúdo numa única página. Assim, as novas páginas não precisam de ser recarregadas a toda a hora. Apenas o primeiro carregamento de página é necessário.

No entanto, uma SPA continua a carregar os dados necessários, muitas vezes através de pedidos AJAX. O JavaScript é utilizado para integrar novas informações na página Web existente. Isto significa que o conteúdo muda sem qualquer alteração no URL. Isto acelera a experiência do utilizador.

Num SPA, a interface do utilizador é actualizada em tempo real . Isto é feito da mesma forma que as aplicações de ambiente de trabalho actualizam uma página. Uma vez que o URL não muda, existe uma interação contínua para o utilizador. As estruturas JavaScript modernas, como React, Angular ou Vue, gerem estas actualizações dinâmicas e são responsáveis pelo funcionamento da aplicação.

Para além dos benefícios do SPA, também traz alguns desafios, especialmente no sector de SEO. Os especialistas em SEO têm de encontrar outras formas de garantir que os motores de busca continuam a rastrear e a indexar o conteúdo. Os conhecimentos e competências técnicas são combinados com o planeamento estratégico para tornar a SPA mais visível e localizável. No entanto, estes desafios não são muito comuns. Especialmente no caso de interfaces que não são indexadas, os problemas surgem mais facilmente.

Começa a trabalhar com um especialista em SEO?

Contacto

Ralf van Veen

Especialista em SEO

Com 11 anos de experiência, melhoro a capacidade de localização orgânica das empresas.

Exemplos ZPE

Muitas aplicações e sítios Web modernos são SPAs. Ao fazê-lo, as interfaces são frequentemente adaptadas às preferências pessoais dos utilizadores. Estes são alguns exemplos de ZPE bem conhecidas:

1. Gmail. No Gmail, todas as mensagens são apresentadas numa única página. Todas as diferentes tarefas que pode efetuar são abrangidas pelo mesmo URL.
2. Facebook. É possível percorrer infinitamente um feed do Facebook e realizar várias acções sem recarregar a aplicação ou o sítio Web.
3. Google Maps. A recuperação de itinerários e a visualização do mapa a partir do Google Maps também podem ser efectuadas sem recarregar a página de cada vez.
4. Netflix. A Netflix permite-lhe percorrer rapidamente toda a sua gama de ofertas para escolher um filme ou uma série.
5. X (anteriormente Twitter). X é oficialmente um PWA, mas o sítio Web principal contém funcionalidades SPA. O conteúdo é carregado dinamicamente aqui.
6. Instagram. No Instagram, o conteúdo é apresentado de forma dinâmica. Grande parte do Instagram é, portanto, uma ZPE.
7. Airbnb. Numa página, pode percorrer todos os alojamentos sem alterar os URLs.
8. GitHub. A interface Web do GitHub inclui elementos SPA, em especial as secções de gestão de projectos e de exploração de código.

Os sítios Web acima referidos utilizam SPA com o objetivo de proporcionar aos utilizadores uma experiência rápida e dinâmica. Isto é especialmente útil para sítios Web complexos com muita interação do utilizador.

Desafios técnicos

Os SPAs utilizam JavaScript, o que ajuda a carregar o conteúdo sem exigir uma atualização completa da página. Por vezes, isto implica desafios técnicos. Para minimizar os desafios, os motores de pesquisa como o Google investiram numa melhor capacidade de lidar com o JavaScript. As restrições foram reduzidas em resultado disso, mas ainda não foram completamente resolvidas.

A execução de acções pelo utilizador é um desses desafios. Com esta ação, é carregado novo conteúdo. Em alguns casos, os motores de busca não conseguem detetar estas actualizações dinâmicas e surge uma discrepância entre a visão do utilizador e a indexação do motor de busca.

Para além disso, os SPAs dependem frequentemente da renderização no local do cliente, em que as estruturas JavaScript são executadas no browser para construir a página (ver os meus artigos sobre renderização dinâmica e renderização do lado do servidor/lado do cliente). Este facto só aumenta a discrepância.

A renderização do cliente proporciona uma experiência de utilizador suave e interactiva, mas inicialmente, quando rastreia um sítio, o bot apenas recebe o modelo HTML simples, com o conteúdo ainda não preenchido. O bot pode estar a indexar uma página em branco, baixando os resultados do motor de busca.

A gestão do orçamento do projeto Crawl é também um desafio. Os motores de busca têm recursos limitados para rastrear um sítio Web. Os SPAs são frequentemente complexos e dependentes do JavaScript, o que consome rapidamente o orçamento.

As vantagens do SPA para SEO

Para além dos desafios acima referidos do SPA para SEO, existem também benefícios para melhorar um roteiro de SEO.

Anteriormente, o HTML era a base do conteúdo da Web, o CSS era responsável pela formatação e o JavaScript era utilizado para funcionalidades interactivas. Atualmente, o JavaScript está presente em mais de 98% de todos os sítios Web e é capaz de adaptar o conteúdo de uma página às acções do utilizador.

Os SPAs, no entanto, eliminam a necessidade de HTML, CSS ou JavaScript para cada ação. Em vez de solicitar fontes diferentes para cada ação, quando o sítio Web é aberto, todas as fontes são solicitadas de uma só vez, permitindo que o navegador faça o seu trabalho.

Esta nova forma de trabalhar garante que os sítios Web sejam muito mais rápidos. Isto melhora muito a experiência do utilizador. Os estudos demonstraram que os visitantes querem esperar no máximo três segundos pelo carregamento de uma página e abandonam a página se o tempo de carregamento for superior. Com um SPA, o tempo de carregamento é geralmente mais curto, mas se for implementado incorretamente, pode acontecer o contrário, afectando negativamente a SEO.

Começa a trabalhar com um especialista em SEO?

Contacto

Ralf van Veen

Especialista em SEO

Com 11 anos de experiência, melhoro a capacidade de localização orgânica das empresas.

As ZPE no essencial

Angular, React e Vue são estruturas líderes bem conhecidas para a construção de SPAs. A diferença entre as ferramentas reside principalmente nas bibliotecas de suporte e nas API, mas têm em comum o facto de a sua renderização do lado do cliente ser de boa qualidade.

O JavaScript reduz o número de pedidos ao browser do servidor. A velocidade da experiência do utilizador aumenta, mas a utilização do JavaScript tem um impacto negativo nos resultados dos motores de busca. Os motores de busca têm uma experiência do sítio Web diferente da dos utilizadores e, na maioria dos casos, vêem conteúdos inacessíveis. Os motores de busca pensam que a página ainda está vazia, enquanto os utilizadores vêem conteúdo dinâmico, que está constantemente a ser recarregado.

Acima de tudo, são os utilizadores que mais beneficiam das SPA. Não só por causa da velocidade, mas também porque os SPAs com ligações fracas continuam a ser facilmente acessíveis. Isto deve-se ao facto de os SPAs colocarem em cache todos os recursos necessários localmente imediatamente após o pedido inicial. Além disso, a disposição não se altera.

Embora sejam necessários esforços adicionais para melhorar a SEO, as ZPE oferecem benefícios suficientes para serem aplicadas de forma permanente. Além disso, uma boa experiência do utilizador contribui para uma melhor SEO.

Desafios dos SPAs em SEO

Como mencionado anteriormente, a utilização de JavaScript com conteúdo carregado dinamicamente pode causar problemas nos motores de busca, uma vez que estes apenas vêem uma página em branco. Isto deve-se ao facto de os motores de busca tradicionais serem concebidos para indexar e rastrear conteúdos HTML estáticos e os SPAs consistem em HTML vazio. Só depois de o JavaScript ser executado é que o HTML é preenchido com conteúdo. Assim, os motores de busca deparam-se com informações incompletas.

Além disso, a SEO utiliza URLs diferentes para cada página de conteúdo. Uma vez que os Spas utilizam apenas uma página HTML e, por conseguinte, o URL não muda, um SPA tem de ser modificado para ser relevante para os motores de busca. É importante que os SPAs sejam fornecidos com metadados SEO relevantes para cada secção individual da aplicação.

O facto de os SPAs serem mais complexos também não ajuda a SEO. O orçamento de rastreio será mais rápido, o que pode levar a que partes do sítio Web sejam ignoradas no tempo que os motores de busca atribuem ao rastreio de um sítio Web.

A otimização SEO requer uma arquitetura adequada dos SPAs, utilizando a renderização do lado do servidor (SSR). O SSR gera o conteúdo do lado do servidor antes de o enviar para o cliente. Pode pré-visualizar uma página inteira através da implementação de técnicas de pré-renderização.

Para garantir que os motores de busca tratam cada secção do SPA como um elemento único, as meta-etiquetas dinâmicas e os dados estruturados devem ser utilizados de forma adequada.

Segue-se um resumo dos maiores desafios:

Dicas para SEO ao utilizar SPAs

Para aplicar SEO de forma tão eficiente aos SPAs, as dicas abaixo são úteis. Neste ponto, gostaria de salientar imediatamente que, se a sua organização gere uma ZPE, é importante trabalhar com um especialista para elaborar uma estratégia à medida.

1. Recorra a um especialista: a complexidade da SEO relacionada com SPAs exige um especialista que possa criar uma boa estratégia personalizada.
2. Utilizar JavaScript universal: Utilize JavaScript universal ou isomórfico para gerar o lado do servidor da página, para que os motores de busca não tenham de executar e processar todos os ficheiros JavaScript.
3. Pré-carregamento de páginas HTML: Pré-carrega todas as páginas HTML e armazena-as na cache do servidor. Isto permite que estas sejam apresentadas aos motores de busca e evita que estes encontrem páginas vazias. Para tal, utilize serviços como o BromBone ou o Prerender.
4. Implementar a deteção de características: Implementar a deteção de características para melhorar a experiência com diferentes fontes de código. Desta forma, a página de base torna-se acessível tanto para os crawlers como para os utilizadores.
5. Utilizar URLs diferentes: Embora os SPAs só precisem de utilizar um URL, é melhor para o SEO utilizar URLs diferentes. Isto pode ser feito utilizando a API do histórico.
6. Organizar os códigos de erro: No caso dos códigos de erro (incluindo 404 e 500), é inteligente criar vistas separadas e modificar os ficheiros JavaScript para que os navegadores sejam direccionados para a vista correcta.
7. Títulos e meta-descrições adequados: Para otimizar a SEO, são indispensáveis títulos e meta-descrições adequados e únicos para cada secção individual.
8. Robots meta tagsAtravés das meta tags robots, dá instruções aos motores de busca sobre como rastrear e indexar as páginas para garantir que isto é feito corretamente e evita a duplicação e a indexação incorrecta.

Resumo

Embora os SPAs pareçam inicialmente colocar muitos desafios para a SEO, utilizando boas técnicas e estratégias, pode otimizar a SEO tanto quanto possível. Por exemplo, utilizar JavaScript isomórfico, deteção de características, pré-renderização e API do histórico.

Além disso, gerir as meta-etiquetas de forma dinâmica e implementar adequadamente as meta-etiquetas dos robots. Isto torna o conteúdo do SPA acessível e indexável pelos motores de busca. Ao empregar as estratégias certas, os SPAs são bons recursos num mundo competitivo e em rápida mudança, onde a experiência do utilizador é uma parte importante da SEO.

Começa a trabalhar com um especialista em SEO?

Contacto

Ralf van Veen

Especialista em SEO

Com 11 anos de experiência, melhoro a capacidade de localização orgânica das empresas.

O livro mais completo sobre a velocidade dos sítios Web

Já escrevi tanto sobre a aceleração de sítios Web e tudo o que isso implica, que gosto de dividir o assunto em diferentes secções: geral, ferramentas, pontos de melhoria da velocidade e dicas. Não hesite em ver e consultar todos os links abaixo para saber mais sobre ferramentas e dicas para acelerar o seu sítio Web.

Geral

• Qual é a velocidade do sítio Web
• Velocidade do sítio Web: A divisão entre marketing e desenvolvimento
• A influência da SEO na experiência do utilizador
• A influência da conceção da Web na SEO
• O que são os principais indicadores vitais da Web do Google?

Ferramentas

• Otimização automática
• Pagespeed.Compare
• W3 Total Cache
• Ferramentas Pingdom
• Google Pagespeed Insights
• GTMetrix

Melhorias na velocidade

• Primeira pintura com conteúdo (FCP)
• Tempo para o primeiro byte (TTFB)
• Tempo para interatividade (TTI)
• Imagem para Maior vista com conteúdo (LCP) pré-carregado
• Ativar a compressão de texto
• Reduzir o CSS
• Tempo total de bloqueio (TBT)
• Índice de velocidade
• Reduzir o JavaScript
• Maior tinta com conteúdo
• Evitar DOM excessivas
• Eliminar CSS não utilizadas
• Remover JavaScript não utilizado
• Fornecer imagens em esquemas modernos
• Ligar antecipadamente às origens necessárias
• Impedir que JavaScript obsoleto seja fornecido aos navegadores modernos
• Utilizar uma política de cache eficiente para itens estáticos
• Remover módulos duplicados do JavaScript
• Evitar múltiplos redireccionamentos
• Codificar imagens de forma eficiente
• Utilizar o carregamento lento
• Carregar pedidos importantes com antecedência

Dicas gerais

• Sugestões para carregar rapidamente um vídeo
• Utilizar o Edge SEO para um sítio Web mais rápido
• Instalar uma rede de distribuição de conteúdos para SEO
• Otimizar imagens para SEO
• O impacto do alojamento na SEO