Javascript: O que é o Javascript e como se aplica nos Sites?! SEO Técnico [2023]
Cada vez mais os sites utilizam o JavaScript na sua construção, de modo a adicionar interatividade aos websites e fornecer
Novembro 6, 2023
No artigo anterior de SEO técnico parte 3 abordamos como fazer a arquitetura de um site ao nível básico e do Schema, Javascripts e APIs. Estas técnicas têm impacto nos resultados de pesquisa orgânicos de um site por isso, neste artigo vamos verificar como se faz a arquitetura de um site ao nível de Conteúdo Dúplicado, Hreflangs, Mobile, AMP, APPs Progressivas, segurança e a velocidade de um site.
É muito comum acontecer Conteúdo Duplicado num site e este impactar bastante na otimização e rastreamento. Conteúdo Duplicado pode ser de sites exteriores ou na própria estrutura interna: textos, imagens. Para que um texto e imagens não sejam copiados de outros sites, basta criar conteúdo original, mas se for conteúdo duplicado internamente, precisamos de técnicas de SEO para resolvê-lo, por exemplo, pode haver conteúdo duplicado quando atualiza uma nova URL para uma determinada página e não elimina o conteúdo antigo ou quando a mesma página pode ser acedida através de 2 links diferentes: https:// exemplo.com/pagina/ e https://www.exemplo.com/pagina. Quando os motores de busca se apercebem que existe conteúdo duplicado, tendem a priorizar o rankeamento do conteúdo original ou pode penalizar ambas as páginas que têm a mesma leitura.
Para resolver este problema é preciso identificar quais são as páginas que estão com este erro, poderemos utilizar esta ferramenta para ver as páginas duplicadas de um site: Siteliner. Depois de ver quais as páginas que contém este erro, terá de adicionar uma “rel canonical” à página pretendida. Outra solução será utilizar o redireccionamento 301 no link da página antiga para a nova. Esta é a maneira de evitar que as páginas concorram entre si no rankeamento do Google e este as penalize.
Com o avanço da globalização, os sites necessitam cada vez mais de múltiplas linguagens. Isso deve-se ao fato de que as pessoas em todo o mundo podem ter interesse nos seus produtos ou serviços, pelo que cada idioma deve ter o seu próprio conteúdo. O principal cuidado que os técnicos de SEO devem ter num projeto multilingue é as relações “de – para”, por exemplo, tenho uma página sobre “SEO Global PT” e quero que, quando o utilizador clique na bandeira inglesa, esta reencaminhe diretamente para a página “Global SEO EN”, sem que este tenha de voltar à homepage de novo, e só depois para a página em questão. Fazer esta proeza torna-se possível através das hreflang.
Hreflang é um atributo HTML utilizado para especificar o idioma e a segmentação geográfica de uma página da web. A tag hreflang informa os motores de busca, como o Google, sobre essas variações. Se estiver no wordpress também poderá utilizar diversos plugins que fazem esta conversão, o plugin “WPML” é uma boa solução, pois permite estabelecer a ligação “de – para”, mas possibilita a edição manual do conteúdo por parte do técnico/administrador, poderá utilizar também plugins como “Hreflang Manager Lite“ ou “Polylang“. Caso pretenda adicionar as hreflangs manualmente é necessário colocá-las no código do cabeçalho, nas tags <head> com esta estrutura:
<link rel=”alternate” href=”http://dominio.com/”hreflang=”pt”/>
<link rel=”alternate” href=”http://dominio.com/fr/”hreflang=”fr”/>
<link rel=”alternate” href=”http://dominio.com/en/”hreflang=”en”/>
Hoje em dia é mais comum um utilizador aceder a sites através do telemóvel e não pelo desktop do computador, por isso a parametrização do Google mudou e priorizou sites que tenham uma boa navegação mobile. Contudo, os websites ainda são desenvolvidos, primeiramente, para desktop, e só depois para mobile. Uma forma de agilizar o trabalho no desenvolvimento da navegação mobile e ajudar o algoritmo do Google a reconhecer automaticamente a responsividade das páginas do site, e colocar a tag “viewport” no cabeçalho do código HTML do site. Esta marcação orienta o navegador sobre como ele deve ajustar as dimensões e a escala da página conforme a largura do dispositivo.
Se considerarmos um site WordPress ou Wix, estes já vem preparados para entregar páginas responsivas automaticamente. No caso do wordpress o “Elementor” (tipo de estrutura de criação de páginas) é o mais indicado para se criar páginas user-friendly. O trabalho de um SEO técnico deverá ajustar os códigos HTML, CSS e JavaScript das suas páginas para os parâmetros mobile estarem de acordo com os tamanhos certos e percetíveis.
Para saber se o seu site está automatizado para mobile, o Google disponibiliza gratuitamente o teste de compatibilidade com dispositivos móveis. Ou poderá ir ao relatório do Google Search Console – “Usabilidade em dispositivos móveis” e verificar se algumas páginas têm alguns problemas. No caso de haver problemas, o Google Search Console irá reportar como deve ser mediada a resolução dos mesmos.
AMP significa “Accelerated Mobile Pages”, é uma estrutura HTML5 de código aberto, com uso de componentes, que permitem criar páginas Web. Com AMP pode-se criar facilmente sites, e-mails, histórias web e anúncios que priorizam o utilizador. As páginas codificadas por AMP aparecem na pesquisa dos motores de busca como um “carrossel” de resultados para dispositivos móveis e apresentam um ícone de um raio e o acrônimo “AMP”. AMP é alimentada por JavaScript, o estilo pode ser personalizado via CSS3 e as páginas são armazenadas em cache. O cache da Google AMP funciona de maneira semelhante a uma rede de distribuição de conteúdo (CDN). As AMPs são completamente separadas de um site mobile típico.
As vantagens de usar uma AMP são:
Do lado do SEO, AMP precisa de otimizações nas suas páginas, tal como é feito com outros tipos de site: wordpress, wix, programação de código, etc. Primeiro terá de perceber se todo o AMP está detectável para os motores de busca, por exemplo, para as páginas AMP, use rel=”amphtml”, em vez de rel=”canonical” como tags <link> no <head>. Não adicione as páginas AMP ao Sitemap XML, o Google já sabe automáticamente quando está a rastrear páginas AMP apenas com a colocação da tag canonica rel=”amphtml”. Pode e deve continuar a utilizar Alt Text nas imagens, H1, hreflangs e todos os dados estruturados no AMP, a diferença é que AMP devolve recursos mais avançados, agora têm a oportunidade de ter carrosséis de host ou pesquisa aprimorada. A velocidade do AMP também é mais rápida que a de um site mobile padrão.
Para quem trabalha com o wordpress existe o plugin AMP que pode ajudar a colocar as páginas nesta estrutura. Para testar o seu AMP pode ser aceder a estas 2 ferramentas: https://search.google.com/test/amp |
https://search.google.com/test/rich-results ou poderá ir ao Google Search Console e ver os relatórios sobre a sua AMP.
Segundo o Google, apps progressivas são aplicativos Web progressivos que usam recursos modernos da Web para oferecer uma experiência de utilizador semelhante a um aplicativo. Como dispensa a instalação de um aplicativo, pode ser acedido através de um URL, o que poupará recursos e memória no dispositivo. As alterações e atualizações numa PWA também são facilmente aplicadas e aprovadas para implementação no lado do utilizador. PWAs foram projetadas para serem capazes, confiáveis e instaláveis, têm a capacidade de intercetar e manipular solicitações de rede, armazenar em cache ou recuperar recursos do cache e entregar mensagens de push (mensagens que surgem como popup nos dispositivos) conforme necessário. PWAs carregam rápidamente, usam o mínimo de dados possíveis e os conteúdos são separados da navegação.
PWA utiliza 4 tecnologias:
Um PWA, pode, de fato melhorar significativamente o seu perfil de pesquisa orgânica, tornando a experiência do utilizador melhor do que o da sua concorrência. A maior vantagem dos PWAs é a maior velocidade em comparação com outras plataformas móveis e aplicativos nativos. O Google rastreia sites PWA da mesma forma que rastreia um site AJAX ou JavaScript, por isso o SEO técnico têm de existir nessas aplicações para garantir que as páginas sejam indexadas corretamente, a única diferença é que o Googlebot não indexará URLs com # neles. Muitas PWAs usam o símbolo hashtag na sua estrutura de URL. A única maneira de contornar isso é implementar uma estrutura de URL usando as regras tradicionais de SEO.
Mas como criar uma PWA?! Existem alguns requisitos iniciais para tal. Primeiramente terá de ter conexão HTTPS, ser controlado por um manifesto WC3, deve estar capacitado para respostas em todos os formatos de tela, ser funcional em múltiplos navegadores (Chrome, Internet Explorer, Firefox, Safari, Edge, Opera, etc, e indexado com uma URL exclusiva para cada página. Para criar a sua PWA, é preciso manter os padrões do arquivo manifest.json na raíz do sistema, já existem geradores de arquivos automáticos hoje em dia. A sua app deve conter imagens, incluindo o ícone clicável presente na interface e deverá ter um certificado SSL. Terá de instalar um SW (Service Worker), um script que executa em segundo plano, alheio à página. E por fim, poderá inspecionar a sua PWA com a “Lighthouse” (executanto a linha de comandos no Chrome DevTools). Poderá verificar mais em detalhe, passo a passo, como se cria uma PWA aqui: https://medium.com/tableless/como-criar-seu-primeiro-progressive-web-app-do-zero-a7e6ca5fb21e.
HTTPS significa “protocolo de transferência de hipertexto seguro” (hypertext transfer protocol secure) e é a versão criptografada do HTTP. O HTTPS protege a comunicação entre o seu browser e o servidor de ser intercetada e adulterada por invasores. O HTTPS usa um certificado seguro de um fornecedor terceirizado para proteger uma conexão e verificar se o site é legítimo. Esse certificado seguro é conhecido como Certificado SSL. Qualquer site que mostre um ícone de cadeado na barra de endereço utiliza HTTPS. Já o TLS “transport layer security” ajuda a criptografar o HTTPS no uso de proteção de e-mails e outros protocolos. Com o HTTPS, dados de cartão de crédito, senhas, dados de utilizadores privados e dados pessoais são criptografados com uma forte camada de segurança.
Na passagem de HTTP para HTTPS é preciso informar ao Google sobre essa transição, começando por configurar o Google Search Console, o Google Analytics, atualizar links internos e atualizar todas as URLs relativas. Primeiro têm de abrir uma nova configuração HTTPS no Google Search Console, mas não faça ainda a eliminação da anterior, até ter a certeza de que tudo foi migrado como deve de ser. Neste momento têm duas possibilidades, mudar os URL’s manualmente implementando o redireccionamento 301 desses URL’s ou mudar os URL’s pelo servidor, ou utilizar algum plugin que fará a atualização dos URL’s instantaneamente, mas é aconselhado verificar se esta transição foi bem feita. No fundo existem muitas maneiras de fazer este redirecionamento, cada SEO têm de definir qual é a melhor condição para a sua situação. Por fim, o Google Analytics deve dar o ok de como o novo domínio é e está seguro, para receber os dados corretos dos novos URL’s. Certifique-se que escolhe o melhor certificado SSL, implemente-o e está feito o processo.
O HTTP é um protocolo desenvolvido originalmente para distribuir conteúdo hipertexto — ou seja, textos com hiperlinks que conseguem levar a outros textos com hiperlinks. A primeira versão do HTTP que conhecemos é o HTTP/0.9, que servia apenas para transferir texto de um servidor para o computador. Até a alguns anos atrás o protocolo que a maioria dos sites utilizava era o HTTP/1.1, mas o problema deste protocolo é que o navegador abre uma conexão, solicita um arquivo ao servidor do site, recebe o arquivo e só depois pede outro arquivo. Para minimizar essa perda de tempo, os navegadores normalmente abrem múltiplas conexões por servidor, significa que seu navegador pode acabar abrindo dezenas de conexões só para carregar uma página.
Hoje o protocolo mudou para melhor, o HTTP/2, é um protocolo binário, feito para ser entendido por máquinas, e não por pessoas. Por isso, é mais eficiente e traz alguns benefícios que consertam os problemas atuais da web. Usa multiplexação, o navegador abre uma única conexão para baixar múltiplos arquivos. HTTP/2 é o feito através de server push, porque existe uma série de chamadas para elementos externos, como arquivos CSS e JS, dessa forma, assim que seu navegador solicitar o index.html, o servidor poderá responder com o index.html, o style.css, o tb.css, o jquery.js e o favicon.png instatâneamente, já estão renderizados automaticamente. Para além de melhorar a experiência do utilizador, o HTTP/2 também trará benefícios para as empresas.
Para o SEO saber qual é o protocolo utilizado em determinado site, pode aceder a extensão do Google “http Indicator” que este fornece a informação através da cor do protocolo, passando com o clique do rato por cima do icon da extensão, aparecerá o protocolo descrito. Se ainda não está a utilizar o protocolo http/2 no site, pode fazê-lo pelo “CloudFlare”, para isso têm de criar uma conta gratuita, insira o seu site/dominio, selecione o plano gratuito e confirme, terá de copiar os DNS da CloudFlare e substituir no servidor atual onde está hospedado o seu site. Poderá verificar passo a passo este processo em: https://blog.escolaninjaw
p.com.br/http2-guia-completo/.
Os Sinais Vitais Web (Core Web Vitals) são as métricas de velocidade, utilizadas para medir a experiência do utilizador nas páginas do site. As métricas medem o carregamento com:
– Largest Contentful Paint (LCP): este deve ocorrer dentro de 2,5 segundos após o início do carregamento da página;
– Estabilidade visual com Cumulative Layout Shift (CLS): as páginas devem manter um CLS de 0.1. ou menos;
– Interatividade com First Input Delay (FID): as páginas devem ter um FID de 100 milissegundos ou menos.
O Think With Google constatou que um carregamento até 5 segundos aumenta 90% a probabilidade do utilizador desistir da visita ao site. Os core Web Vitals podem ser vistos em tempo real, monitorizados e resolvidos através do “PageSpeed Insights” ou do “Gtmetrix”.
Para melhorar a velocidade de uma página existem alguns técnicas para serem executadas, nomeadamente, comprimir os arquivos enviados pelo servidor (Gzip), reduzir o tamanho das imagens da página, eliminar os caracteres superfluos dos códigos HTML, CSS, Javascript, criar AMPs e aproveitar o cache do navegador.
Gzip é um formato de compressão de arquivos do site. Ou seja, ele reduz o tamanho dos arquivos enviados pelo seu servidor e o tempo de transferência, com taxas de até 90% de compressão nos arquivos maiores. Essa é uma das medidas mais eficientes para reduzir o tempo de carregamento das páginas. Todos os navegadores atuais são compatíveis com esse formato e processam a compactação automaticamente quando o utilizador acede a um site. Alguns servidores fazem isso automaticamente, mas se não, existem diversos plugins de cache para WordPress que ativam a compactação de Gzip. Um deles é o “WP Fastest Cache”, que mostra uma simples caixa de seleção com tudo o que pode configurar, inclusive a compactação do Gzip.
Existe um trabalho de SEO por detrás de cada imagem, pois estas podem ser pesadas e tornarem o site lento, imagens web carregam informação que irá ser fornecida ao Google. O tamanho do arquivo de uma imagem é determinante para o rankeamento da página e da própria imagem, esta deve ser leve. Para isso pode utilizar algumas ferramentas de compactação como o “Optimus”, o “Tinypng” ou o Photoshop. Os formatos mais avançados de imagens e que mantém a qualidade são o JPEG 2000, JPEG XR e WebP, pode utilizar o plugin “WebP Express” ou o “Optimole” para otimizar as suas imagens para o formato desejado de uma maneira mais simples. O SEO também deve ter o cuidado de colocar no site imagens já com o tamanho certo, para que o site não tenha de fazer redireccionamentos. Existem ainda imagens que estão abaixo da dobra da página (não aparecem para o utilizador) que podem ter o seu carregamento adiado, nestes casos deverá utilizar o recurso lazy load, através do plugin Lazy Load para WordPress. Assim, as imagens só são carregadas quando o usuário chega até elas.
Minificar os códigos HTML, CSS e Javascript é retirar o código que não interessa, isto é, eliminar quebras de linha, espaços em branco e comentários. Existem aplicativos gratuitos para isso no wordpress: “W3 Total Cache” e “Autoptimize”. Se trabalhar com um site feito apenas em programação terá de verificar as páginas manualmente. Também terá de eliminar recursos que impedem a renderização do site, o CSS e o Javascript atrasam o HTML para entregar ao utilizador as páginas interativas. Para resolver isso, pode determinar que os recursos Javascript e CSS carreguem de forma assíncrona, isto pode ser feito através dos plugins: “Async Javascript” e “Speed Booster Pack”.
Dom significa Document Object Model e é a estrutura dos objectos que o navegador gera de toda a vez que carrega uma página. É uma estrutura hierárquica em que existem diferentes objetos que dependem uns dos outros, existe o objeto principal que depois vai fazer a ramificação para outros mais secundários, como um fluxograma. DOM representa a estrutura HTML da página composta por uma série de tags. O DOM afecta o desempenho de uma página se for excessivo, pois este inclui elementos HTML que não são visiveis na primeira vez que o utilizador carrega a página, do qual aumenta o consumo de dados e o carregamento fica mais lento, se for excessivo também o desempenho da execução diminui, á medida que os utilizador e os scripts interagem com uma página, o navegador recalcula continuamente a posição e estilo das tags html, e este pode precisar de mais memória para processar as páginas.
Para que o DOM não afete negativamente as páginas do site, deve remover todos os elementos HTML desnecessários do site:
SEO técnico é extremamente importante para um site, pois sem ele os motores de busca não vão rastrear, indexar e melhorar a performance do mesmo. Neste artigo de SEO Técnico parte 4 vimos como construir a arquitetura correta de um site, a segurança e a velocidade do mesmo. No próximo artigo abordamos a temática do SEO Local ou Google My Business.
Atualmente, muitas empresas precisam de resultados imediatos, mas a verdade é que não podem dar-se ao luxo de implementar SEO internamente enquanto alavancam com a prioridade do foco do seu negócio. Se ainda não consegue dar conta destas etapas ou não tiver tempo para as colocar em prática, a Bringlink SEO garante que tenha a visibilidade e o crescimento da marca que merece.
Fale connosco, envie email para a bringlinkseo@gmail.com.
Semrush – https://www.semrush.com/blog/amp-pages/
Fandangoseio – https://www.fandangoseo.com/blog/dom-size/
Vooozer – https://vooozer.com/pt/blog/o-que-e-google-amp/
Gobacklog – https://www.gobacklog.com/blog/pwa-e-seo/
Neilpatel – https://neilpatel.com/br/blog/pwa-o-que-e/
Tecnoblog – https://tecnoblog.net/especiais/http-2-como-funciona/
Escola Ninja Jawp – https://blog.escolaninjawp.com.br/http2-guia-completo/
Rock Content – Como melhorar a velocidade do site em 11 passos simples! (rockcontent.com)
Cada vez mais os sites utilizam o JavaScript na sua construção, de modo a adicionar interatividade aos websites e fornecer
A migração é uma das tarefas mais desafiadores de qualquer SEO e pode ser feita de diversas maneiras, dependendo da
Construir uma marca em linha em 2023 não será uma chave única para o sucesso, mas uma combinação de estratégias.