Para a maioria das pessoas fora da indústria de marketing digital, o web design ainda é um mistério.
Para piorar ainda mais, muitas pessoas pensam que o design web é subjetivo e que, enquanto o cliente gosta, então deve ser bom. Mesmo que isso seja falso por uma série de razões, que não abordaremos neste artigo, há outro problema. Uma infinidade de problemas podem estar à espreita sob a superfície e podem matar seus esforços de
SEO .
A maioria dos web designers não tem pistas sobre a verdadeira otimização de mecanismos de pesquisa. A maioria pensa que, desde que coloquem algumas tags H1 e H2, atributos ALT de imagem e meta tags em uma página da Web, seu trabalho está concluído. Todo
profissional de SEO experiente sabe que é completamente falso e perigoso. De fato,Uma vez que seu web design esteja completo, é quando o trabalho real começa.
Um caso interessante (mesmo que antigo) servirá de exemplo prático aqui.
Certa vez começamos os trabalhos de um cliente que precisava
otimizar o site.
Ele já havia contratado uma
agência de publicidade para projetar seu site. O site foi criado usando o Adobe Flash e foi incorporado no que era essencialmente uma página HTML vazia .
Na época, eles estavam gastando muito dinheiro todos os meses em anúncios de PPC , que eram sua única fonte de tráfego e recebendo menos de quatro leads por mês.
Como seu site foi criado no Flash e tinha zero otimização do mecanismo de pesquisa, o conteúdo era completamente invisível para o Google. Isso levou seus custos PPC às alturas, porque o Google não conseguiu atribuir uma pontuação de qualidade precisa e eles praticamente não tinham tráfego orgânico.
Projetamos um novo site para ele, que, enquanto visualmente poderoso, utilizava o HTML limpo e rápido que os motores de busca poderiam rastrear facilmente. Juntamente com o desenvolvimento contínuo de conteúdo e a construção de links, eles passaram a conseguir maior visibilidade.
Ah mas Flash é antigo.Nem é usado mais.
Verdade. Mas existem outros casos. Certa vez recebemos um outro site pronto para corrigir
erros de design que estavam afetando o
SEO. Era um site de conteúdo adulto e , cada vez que o usuário acessava o site , era necessário informar se ele já tinha mais de 18 anos. Até aí tudo bem , é o correto. Mas isso não pode bloquear os buscadores. Nunca !!. Nesse caso o desenvolvedor bloqueou todo o acesso ao redirecionar todos os acessos para essa outra página nada otimizada. Felizmente entendemos o erro e hoje esse nosso cliente está na primeira página no segmento dele.
O ponto é que mesmo os chamados especialistas muitas vezes cometem erros que têm um impacto negativo no
SEO . Às vezes, por causa da ignorância e outras vezes porque ignoram os detalhes críticos. Então, hoje, eu queremos ajudá-lo a evitar isso, compartilhando alguns dos erros comuns que matam os esforços de
SEO .
10 erros de design para evitar
Falha em estabelecer metas quantificáveis e medir seus resultados ↓
Não testando completamente todos os elementos de design ↓
Não priorizando a velocidade da página ↓
Meios inadequadamente dimensionados / não optimizados ↓
Não priorizando o design responsivo ↓
Mudanças na estrutura de URL ↓
Ignorando a segurança do site ↓
Falha em testar elementos de missão crítica ↓
Fazendo excessiva http solicitações ↓
Ignorar a lista de verificação de lançamento final ↓
Erro 1: não estabelecer metas quantificáveis e medir seus resultados
Se você não sabe onde você está tentando ir, como você consegue chegar lá? E como você saberá quando você tiver? Sem definir metas quantificáveis e medir seus resultados, você não pode, e é por isso que é uma parte essencial do design web.
Uma vez eu tinhamos um cliente que constantemente insistia que queria ser o líder em sua indústria, mas se recusara a estabelecer metas específicas. Ele mudava regularmente de curso no meio das campanhas, então desperdiva tempo e dinheiro e nunca fez muito progresso.
Se você tiver objetivos específicos, é fácil determinar rapidamente se uma decisão específica o levará mais perto ou mais longe deles. Sem objetivos específicos, no entanto, é fácil vagar sem rumo, perseguindo o mais novo objeto brilhante.
Então, o que exatamente devo ter como objetivo?
Duas coisas; um objetivo legítimo deve ser tanto específico e quantificável .
Aqui estão alguns exemplos de metas legítimas para o seu site:
Gera uma receita adicional de R$ 5000.00 de fontes de tráfego existentes
Aumentar as visualizações de páginas por visita em 20%
Diminuir a taxa de rejeição em 20%
Melhore as conversões do tráfego web existente em 15%
Aumenta o tráfego de pesquisa orgânica em 50%
No mínimo, isso significa utilizar o Google Analytics , o Google Search Console e as Ferramentas do webmaster do Bing . Um cleinte inteligente também medeia a atividade de mídia social, links de entrada, PPC e métricas de email.
Idealmente, você também deve utilizar um sistema e analisar outras informações comerciais críticas como:
Receita por canal e campanha
Retorno do investimento por canal e campanha
Taxa de retenção de clientes
Comprimento do processo de vendas
Custo / custo de aquisição do cliente por lead
Taxa de conversão (visitante para liderar, levar a prospectos e prospectar para o cliente)
Valor médio do cliente
Quanto mais dados você pode efetivamente analisar, melhores decisões você estará equipado para fazer.
Erro 2: não testando completamente todos os elementos de design
Não consigo lhe dizer quantas vezes eu vi um site que é lindo quando visualizado em uma área de trabalho, mas se degrada em uma pilha fumegante de poo quando visualizado em um dispositivo móvel.
Quando criamos um site, devemos testá-lo várias vezes em múltiplos navegadores e tamanhos de tela, portanto não encontramos surpresas no final. Mas também precisamos testar tudo novamente em um servidor de teste uma vez que esteja completo. Também deve ser testado novamente depois que ele é lançado e disponibilizado publicamente.
Isso pode parecer excessivo, mas é fácil fazer uma pequena correção de CSS que acabe criando ainda mais problemas. Acontece o tempo todo, mesmo para nós.
Se você não tomar o tempo para rever todo o site após a conclusão, você pode perder problemas graves porque você "já verificou essa parte".
Pequenos problemas a serem verificados incluem:
Problemas de margem e / ou preenchimento
Tamanhos de fonte causando quebras de linha ímpares
Tamanhos de elementos em determinados tamanhos de tela
Imagens de tamanho inadequado
Problemas de cor ou transparência
Individualmente, essas questões podem ter um impacto negativo leve, mas cumulativo, na experiência do usuário. Você pode fugir com alguns, mas lembre-se de que eles se somam rapidamente, levando a um menor tempo no local e taxas de rejeição mais altas, o que significa menos receita e diminuição do ranking orgânico.
Alguns dos problemas mais sérios que podem tornar seu site completamente inutilizável incluem:
Problemas de posicionamento (absoluto, relativo e fixo)
Problemas de flutuação
Problemas do índice Z
Problemas de CSS
Erros de JavaScript
Antes de declarar "missão completa", você deve testar seu site em vários navegadores e em vários dispositivos, incluindo:
Google Chrome
Firefox
Microsoft Edge / Internet Explorer
Safári
Pelo menos um dispositivo iOS e Android, mas de preferência dois (um telefone e um tablet)
Existem ferramentas disponíveis para testar em quase todos os ambientes imagináveis, mas os navegadores da Web percorreram um longo caminho na última década, então você realmente não precisa deles, desde que você possa testar nos navegadores mais comuns na área de trabalho, bem como Em um ou mais dispositivos iOS e Android.
Você também deve usar o
Mobile Friendly Test do Google porque pode identificar os critérios específicos que o Google está procurando, incluindo o tamanho do alvo, a proximidade do elemento de toque e o tamanho da janela de exibição. Você não precisa necessariamente executar todas as suas páginas através dela, mas você deve executar pelo menos em cada página que possui elementos de design exclusivos.
Erro 3: não priorizando a velocidade da página
A velocidade da página não é apenas algo que apenas desenvolvedores obsessivos precisam se preocupar mais. Hoje, o Google coloca uma enorme ênfase em sua importância e tem um tremendo e comprovado impacto subconsciente sobre os visitantes.
De acordo com um estudo realizado pela Amazon , a diferença de apenas 100 ms - uma unidade de tempo que o humano comum não consegue perceber, foi suficiente para reduzir suas vendas em 1%. Se essa pequena unidade de tempo tiver muito impacto direto nas vendas, qual o tipo de impacto que você acha que um segundo ou mais extra terá?
Então, como você desenvolve o site mais rápido possível ?
Você começa com HTML e CSS limpos e eficientes e , em seguida, minimize plugins e solicitações http, otimize sua mídia, minimize o CSS e JavaScript e implemente o armazenamento em cache. Sempre há espaço para uma melhoria contínua.
Existem várias técnicas que você pode usar para melhorar drasticamente a velocidade da página, incluindo:
Minimizando solicitações http
Otimizando a mídia
Reduzir redirecionamentos
Minimizar widgets
Utilizando o cache
Ativar a compactação
Minimizar plugins
Aderindo a fontes do sistema
Minimização de scripts de anúncios
Usando sprites
Minimizando CSS e JavaScript
Erro 4: mídia inadequadamente dimensionada / não optimizada
Se o seu site carregar muito devagar, os visitantes sairão sem se tornarem clientes, o Google pode classificar seus concorrentes acima de você. Ninguém quer isso, então precisamos dimensionar e otimizar adequadamente nossa mídia para obter a melhor velocidade da página possível.
O usuário médio só sabe que eles têm uma imagem bonita em seu iPhone que eles querem usar em seu site. Eles não percebem, no entanto, que a imagem é significativamente maior do que deveria ser para o seu site, então eles simplesmente carregá-lo, resultando em uma redução dramática na velocidade da página.
Isso não é surpreendente, considerando que uma imagem do smartphone médio poderia ser até 40 vezes maior do que precisa ser. Se você incluir apenas algumas imagens não optimizadas em uma página, você pode reduzir drasticamente o seu site para dispositivos móveis.
Enquanto um site rápido e dinâmico é essencial nos negócios de hoje, não precisamos desistir de projetos maravilhosos para alcançá-lo. Dimensionar e otimizar adequadamente sua mídia pode percorrer um longo caminho para alcançar a velocidade de página mais rápida possível sem prejudicar a estética do seu site. Quando você fizer isso, seus clientes e o Google agradecerão.
Aqui estão algumas dicas para otimizar sua mídia:
Imagens
Escolha o formato ideal . O JPG é o melhor para imagens fotográficas, GIF ou PNG para imagens com grandes áreas de cor sólida.
Dimensione as imagens adequadamente. Se uma imagem for exibida em 800px de largura em seu site, não há vantagem para usar uma imagem de 1600px de largura.
Comprima o arquivo de imagem.
Vídeo
Escolha o formato ideal. O MP4 é o melhor na maioria dos casos porque produz o menor tamanho de arquivo.
Sirva o tamanho ideal (dimensões) com base no tamanho da tela dos visitantes.
Elimine a faixa de áudio.
Comprima o arquivo de vídeo.
Minimize o comprimento do vídeo.
Carregue vídeos para o YouTube e / ou Vimeo e use seu código de incorporação do iframe.
Erro 5: não priorizando o design responsivo
Vivemos em um mundo móvel. Na verdade, o Google é tão sério quanto ao atendimento aos visitantes móveis, que já prioriza a classificação com base na versão móvel do conteúdo em vez de usar um índice separado Para celular e desktop.
A maioria dos web designers competentes hoje entende a importância do design responsivo, tanto por causa do rápido aumento do tráfego móvel, que ultrapassou o tráfego do desktop, e devido à importância que o Google colocou sobre ele.
Embora ainda não seja um fator de classificação direta de acordo com o Google, o design responsivo é um fator de classificação indireta devido ao seu impacto na experiência do usuário. Se um visitante que usa um dispositivo móvel chega em um site que não responda, eles retornarão aos resultados da pesquisa para encontrar um que seja. Isso tem um impacto direto na sua taxa de rejeição, páginas por visita e tempo no site, que são todos fatores de classificação direta.
O Google tem uma ferramenta útil para testar se seu site é amigável para dispositivos móveis, mas também é uma boa idéia testá-lo em um dispositivo móvel real para garantir que ele funcione do jeito que você espera. Se o seu site não é compatível com dispositivos móveis, considere usar uma estrutura responsiva.
Erro 6: alterações na estrutura de URL
Alterar a estrutura de URL de um site , se manipulado incorretamente, pode destruir completamente os rankings orgânicos e o tráfego de busca. Isso não quer dizer que você precisa evitar isso, pois, se for manuseado corretamente, pode ter um impacto positivo em seu site.
Redesenhar um site nem sempre resulta em necessidade de alterar a estrutura do URL , mas quando se desloca de um site HTML estático para um CMSs , geralmente é inevitável. A maioria dos sites pode se beneficiar com a implementação de uma estrutura de URL hierárquica e um redesenho é o momento perfeito para fazê-lo. A chave é identificar todas as páginas atuais em seu site e implementar um redirecionamento 301 para o novo local de cada página.
Para ser seguro, é uma boa idéia testar manualmente cada URL redirecionado em um navegador e, em seguida, prestar atenção extra ao Google Search Console por algumas semanas para garantir que seu site não esteja gerando erros 404.
Erro 7: ignorando a segurança do site
Muitas pessoas pensam que não precisam se preocupar com a segurança do site porque "ninguém desperdiçaria seu tempo tentando cortar meu pequeno site". Isso é um pensamento equivocado. Hacking é um jogo de números, e a maioria dos hackers alavanca ferramentas para explorar fraquezas comuns em uma grande quantidade de sites.
Se o seu site for hackeado, existem algumas possíveis consequências que você pode enfrentar, dependendo do que os hackers fazem.
Por exemplo, se eles cortarem seu site para distribuir um vírus, o Google irá destacar seu site nos resultados da pesquisa como um risco de segurança que os visitantes devem evitar. Se isso acontecer repetidamente, o Google pode desindexar seu site.
Por outro lado, se eles cortarem seu site para incorporar links, o Google pode emitir uma penalidade manual para links externos não naturais. Depois de remover os links incorporados, essa penalidade pode durar algumas semanas, ou pode durar tanto tempo que faz mais sentido começar de novo com um novo domínio.
Então, como asseguramos corretamente o nosso site?
A verdade seja dita, é impossível proteger completamente um site. Se estiver online, pode ser hackeado. É apenas uma questão de tempo e recursos. É por isso que a maioria dos computadores da CIA e NSA não estão conectados à Internet.
A idéia é desincentivar os hackers, tornando-se um desperdício de seu tempo e recursos para tentar piratear seu site. Eles estão procurando alvos fáceis, então, se você garantir que seu site não seja um, eles passarão para o próximo.
Erro 8: Não testar elementos de missão crítica
Se certas partes do seu site não funcionam, torna-se praticamente inútil. Se você está começando a partir do zero ou redesenhando um site existente, é essencial testar quaisquer elementos de missão crítica, incluindo:
Formas de contato - Verifique todas as configurações de formulário e enviar uma submissão teste para confirmar que todos os destinatários necessários receber a mensagem apropriada, com todas as informações aplicáveis, e que ele está formatado corretamente.
Configurações de rastreamento - Após a publicação do site, você precisa garantir que nada desejado nos resultados da pesquisa esteja bloqueado. Esta é uma simples questão de verificar suas configurações de seus arquivos robots.txt.
Ecommerce - Você deve executar algumas transações no modo de teste para garantir que seu sistema de comércio eletrônico funcione adequadamente, especialmente se você tiver vários atributos de produtos, regras de envio complexas ou produtos altamente customizáveis. No entanto, não pare com a transação de teste. Eu sempre gosto de executar pelo menos uma transação ao vivo para garantir que tudo funcione exatamente como deveria. Você sempre pode anular isso depois.
Erro 9: fazer pedidos excessivos em http
Cada solicitação http única adiciona o tempo que leva para suas páginas serem carregadas. Isso inclui scripts, arquivos CSS e imagens. Você pode não pensar que você tem todos os muitos, mas estou disposto a apostar que você ficará surpreso quando você olha para o 1) código processado; 2) todas as imagens que estão incorporadas; 3) todos os seus plugins e widgets; E 4) todos os scripts de rastreamento e veiculação de anúncios que você está usando.
As pequenas coisas se somam rapidamente
Muito antes de a maioria de vocês estarem no mercado de marketing digital, e mesmo antes de muitos de vocês terem nascido, a maioria das pessoas conectadas à Internet via modems dial-up. Naquela época, a maioria das conexões era um reduzido 56 Kbps, o que significava que cada imagem aumentava dramaticamente o tempo que levava uma página para carregar. Era comum esperar por 30 segundos ou mais para a página da Web média carregar completamente. Para compensar isso, romperemos as imagens em pedaços menores para que uma página da Web possa renderizar-se progressivamente ao invés de esperar uma única imagem grande para carregar.
Hoje, a maioria de nós é abençoada com banda larga. A conexão de internet 3G em seu dispositivo móvel é mais de setenta e uma vezes mais rápida do que a conexão mais rápida que estava disponível durante os dias de acesso dial-up e ISDN . Como resultado, as pessoas ficaram desleixadas. Eles passaram de tentar manter uma página inteira bem abaixo de 100KB, até um momento em que uma única imagem de fundo pode ser bem superior a 100KB. Muitas pessoas pensam que não precisamos mais se preocupar com coisas triviais, como o tamanho da imagem, mas isso simplesmente não é verdade.
Como Dave Davies apontou em um episódio recente da Webcologia , é muito provável que possamos chegar em breve a um ponto em que as pessoas que dependem de ferramentas como construtores de sites e temas pré-construídos não poderão competir com aqueles Que sabem como desenhar e criar sites a partir do zero.
Quando você é capaz de usar manualmente cada parte de um site, você está armado com um conhecimento poderoso que permite que você sintonize e otimize como é apresentado aos motores de busca. Isso é conhecimento de que os jockeys do construtor de sites, os draggers e os devanejos do WYSIWYG e os modders de temas simplesmente não têm.
E com a ênfase que o Google está colocando na velocidade da página (velocidade da página do mundo real, não apenas a métrica dumbed-down em sua ferramenta), esse conhecimento se tornará essencial nos próximos anos.
Um excelente exemplo desse tipo de conhecimento é o sprites, que você pode ter visto em jogos de vídeo mais antigos, como a Nintendo original. Uma vez que os consoles de jogos não tinham muito poder de processamento, os desenvolvedores manipulariam uma única imagem grande para exibir apenas a parte relevante. Isso significava que eles só tinham que carregar uma imagem, o que reduziu significativamente o poder de processamento necessário para um jogo.
Exemplo de Sprite
Os designers da Web podem usar essa técnica para reduzir significativamente as solicitações HTTP, combinando várias imagens pequenas em uma única imagem maior. Devido à forma como as despesas gerais e a compressão são calculadas, isso geralmente resulta em um tamanho de arquivo menor em comparação com a soma de vários arquivos menores, além disso, apenas um arquivo é baixado.
Ainda não termina com imagens ...
Plugins, widgets e anúncios !
Muitos plugins do WordPress carregam pelo menos um arquivo JavaScript e CSS . Alguns carregam vários de cada um. Vamos supor que você tem apenas 5 plugins que cada carga apenas um extra de JavaScript e CSS file- que é um extra de 10 solicitações !
Muitos pedidos
Todo widget social, como o pequeno plugin da página do Facebook que você vê na maioria dos sites, carrega um arquivo de JavaScript externo. (O que é ainda pior para a velocidade da página do que um arquivo JavaScript externo que reside em seu próprio servidor.)
Widget do Facebook
Os scripts de serviço de anúncios, como AdSense, Outbrain e Taboola, bem como scripts de rastreamento, como o Google Analytics, usam um JavaScript externo. Como já abordamos, os scripts externos criam um impacto negativo significativo na velocidade da página, mas é especialmente ruim com os scripts de veiculação de anúncios devido ao levantamento pesado que eles fazem para criar anúncios dinamicamente.
Erro 10: ignorando a lista de verificação do lançamento final
Há um tremendo número de tarefas individuais dentro de um projeto de web design e, muitas vezes, numerosas mudanças em todo o projeto, o que torna absolutamente impossível uma lista de verificação de lançamento final.
Isso garante que você não negligencie algo importante, e acredite em mim, é fácil fazer isso . Não cometa o erro de pensar que, por ter desenvolvido sites suficientemente longos, você não precisa se preocupar com uma lista de verificação.
Aqui estão algumas das coisas que deveriam estar na sua lista final de verificação de lançamento:
Valid HTML / CSS
Compatibilidade cruzada do navegador
Testado em vários dispositivos
Exibição e funcionalidade do menu
Links quebrados
301 redirecionamentos
Faltando páginas / 404 erros
.htaccess
Robots.txt
Configurações do crawl do WordPress
Sitemaps
Velocidade da página
Cache
Design responsivo
Formulários (Formulários de contato, formulários de inscrição de e-mail, etc.)
Funcionalidade de comércio eletrônico
Botões de compartilhamento social
Elementos interativos
Multimídia
Favicon
Títulos
Meta descrições
Atributos Alt
Analítica
Google Search Console / Bing Ferramentas para webmasters
Etiqueta de remarketing / pixel do Facebook
Minified HTML , CSS e JavaScript
