website launch checklist
1.0.0
Coisas para verificar antes de lançar um site
Antes de lançar o site certifique-se de que:
Uma tag alt ("atributo alt" ou "descrição alt") é um atributo aplicado a uma imagem que serve como uma descrição invisível da imagem.
Ele descreve o conteúdo de uma imagem e é usado por leitores de tela para leitura em voz alta para usuários cegos. Também é utilizado pelos motores de busca, uma vez que não conseguem interpretar imagens, baseiam-se na descrição da alt tag. O uso de alt tags em imagens impacta positivamente a classificação nos mecanismos de busca, portanto, é bom para SEO. O texto alternativo também é exibido quando as imagens não carregam.
A tag Alt deve descrever o conteúdo da imagem e é recomendado ter até 125 caracteres.
Exemplo:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Se você tiver um ambiente de "teste" ou "dev", é provável que esteja bloqueando o teste da indexação.
Se você deseja que seu site apareça nos resultados de pesquisa, esse mecanismo de pesquisa deverá “indexar” seu site. Os motores de busca possuem “bots” automatizados que visitam páginas da web, “rastreiam” o conteúdo e o armazenam no índice do mecanismo de busca. Isso permitirá que o mecanismo de pesquisa recupere posteriormente os resultados de pesquisa mais relevantes.
Antes de lançar certifique-se de que a versão que vai ao ar permite a indexação do seu site. Certifique-se de não ter essa meta tag em seu HTML:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesAlém disso, verifique seu arquivo robots.txt. Se você deseja permitir que todas as páginas do seu site sejam indexadas, seu robots.txt deverá conter o seguinte:
User-agent: *
Disallow:
Mais um lugar para verificar são as configurações do Apache/Nginx.
Quando um site é compartilhado no Facebook ou Twitter, ele exibe uma miniatura, um título e uma descrição:
Se você deseja que seu site seja exibido com miniatura, título e descrição corretos, você deve adicionar meta tags exigidas pelo Facebook e Twitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Você pode testar a aparência do seu site quando compartilhado no Facebook ou Twitter usando estas ferramentas:
Depurador de compartilhamento do Facebook
Validador de cartão do Twitter
Favicon é o pequeno ícone próximo ao título do site na guia do navegador.
Torna o site fácil de identificar quando muitas guias estão abertas, visualizando o histórico do navegador e os favoritos. Alguns mecanismos de pesquisa, como o DuckDuckGo, exibem o favicon próximo ao URL no resultado da pesquisa. Além de melhorar a usabilidade, pode ajudar a chamar a atenção do usuário nos resultados da pesquisa, por isso podemos chamá-la de técnica indireta de SEO.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Os usuários podem salvar uma página da web na tela inicial em dispositivos móveis. Isso cria um ícone para o site, assim como o ícone do aplicativo. Tocar nesse ícone abrirá o site no navegador.
Os desenvolvedores recebem algum controle para tornar a experiência do site mais próxima de uma experiência de aplicativo nativo no celular. Por exemplo, por padrão, o iOS definirá a captura de tela do site como um ícone. Mas você pode definir um design de ícone personalizado usando as meta tags da Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> O Android usará o valor “apple-touch-icon” ou o favicon (se a meta tag não estiver presente) para criar um ícone na tela inicial.
Se a ferramenta analítica que você usa não tiver um filtro para o ambiente, você estará poluindo a análise do seu site com resultados de testes em um ambiente que não seja de produção. Você pode adicionar o filtro na ferramenta de análise ou incorporar condicionalmente o código apenas no ambiente de produção.
A tag Title especifica o título do site. A meta tag de descrição contém uma breve descrição da página
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >O título é o que aparece nos resultados do mecanismo de pesquisa, exibido na aba do navegador e nos cartões da rede social durante o compartilhamento (se um título separado não for fornecido para a rede social).
A descrição também é exibida nos resultados da pesquisa. Não é usado diretamente no algoritmo de classificação, portanto não afeta as chances de aparecer no resultado da pesquisa, mas aumenta a probabilidade de os usuários clicarem no seu site nos resultados. Isso aumentará a taxa de cliques (CTR) da sua página para o Google, o que significa que o Google irá considerá-la um bom resultado e terá uma classificação mais elevada em resultados de pesquisa futuros.
Se você tiver links para links externos em sua página, especialmente aqueles que abrem em uma nova aba ou janela, você deve usar rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Há benefícios de segurança e desempenho ao fazer isso. Sem ele, a página externa pode acessar seu objeto window usando window.opener . Você pode aprender mais sobre quais vulnerabilidades são resolvidas usando o noopener aqui: Sobre rel=noopener
O outro site também pode ser executado no mesmo processo da sua página atual, portanto, se a página externa estiver executando algum JavaScript pesado, isso afetará negativamente o desempenho do seu site. noopener também evita isso.
Leia mais sobre isso aqui: Os benefícios de desempenho de rel=noopener
À medida que você faz muitas alterações em seu site ou usa muitas bibliotecas externas ou estruturas CSS, é provável que seu arquivo CSS contenha muitos estilos que não são usados por suas páginas. Por exemplo, você pode estar usando um tema de algum plugin, mas o CSS dos outros temas simplesmente permanece em seu arquivo CSS sem uso e o tamanho do arquivo da folha de estilo aumenta.
Você pode remover todos os estilos não utilizados usando uma ferramenta chamada PurgeCSS. Você pode usá-lo com CLI ou em Webpack, Gulp, etc. Ele irá analisar suas páginas, combinar os seletores usados nas páginas com os dos arquivos CSS e remover os estilos não utilizados. Em um projeto meu recente, que usava o framework Tailwind CSS, havia, é claro, muitos utilitários que eu não usei. PurgeCSS diminuiu o tamanho do meu arquivo app.css de 214 KiB para 45,6 Kib.
Porém, tenha cuidado, pois se um plugin criar elementos dinamicamente na página, o PurgeCSS não detectará os estilos desse elemento. Mas você pode colocar seletores na lista de permissões passando os seletores ou padrões de seletor na configuração, e também pode colocar o seletor na lista de permissões usando um comentário especial para colocar regras específicas na lista de permissões. Leia mais sobre a lista de permissões do PurgeCSS.
Quando o navegador solicita um recurso, o servidor pode instruir o navegador por quanto tempo ele pode armazenar, ou "armazenar em cache", o recurso. Na próxima vez que o recurso for necessário, ele poderá usar a cópia local. Isso melhorará muito a velocidade e reduzirá as cargas no servidor. Você pode configurar seu servidor para retornar um cabeçalho, informando por quanto tempo o ativo deverá ser armazenado em cache:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Você deve definir a idade máxima com base na frequência com que seus ativos mudam.
Você também pode configurar seu servidor para usar compactação, como compactação Gzip, que permitirá que os recursos sejam transferidos mais rapidamente. A compactação de arquivos CSS com gzip economiza cerca de 50-70% do tamanho do arquivo.
