Dicas de SEO para Front-end

Sabemos que SEO é uma forte arma que nos possibilita alcançar um bom posicionamento nos sites de busca e aqui vai algumas dicas para isso.

por Gabriel Azevedo 19/02/2015

1 – Webmaster Tools

Webmaster Tools é uma ferramenta disponibilizada pelo Google e através dela você pode medir o desempenho de seu site, ter informações bem completas de erros e melhorias e muito mais para você que queira investir em otimização.

  • Mas, como começo a utilizar esta ferramenta?

Simples! Você só precisa dar permissão ao Webmaster Tools a seu site, enviando um arquivo HTML para o FTP (é o método mais recomendado), ou utilizando uma meta tag ou outros tipos de verificação.

Pronto, ja fez isto? Agora você já pode ver quais os erros o Google está apontando em seu site, ele vai te mostrar tudo que precisa arrumar ou melhorar, e agora só depende de você.

E no próprio Webmaster Tools você tem acesso ao Page Speed do Google, que é uma ferramenta show de bola, que vai te dar um relatório completo do seu site.

Vai lá e da uma olhadinha em tudo isso.

2 – A tag Title e Description

A tag </strong> é uma das coisas que o Google mais da relevância na otimização do seu site, sempre planeje bem o que você vai colocar no titulo de sua página, para que seu cliente saiba o que ele vai encontrar entrando nela.</p> <p>A tag <strong><description></strong> também é um dos passos mais importantes na otimização de seu site, e é ele que vai levar a seu cliente uma breve descrição do que ele vai encontrar entrando em sua página.</p> <p>Ah vocês lembram da nossa ferramenta ali em cima, o Webmaster Tools? Ele também nos ajuda bastante com nossas tags Title e Description, entrando no Webmaster Tools indo em <strong>Aspecto da pesquisa > Melhorias de HTML</strong>, lá você encontrará alguns erros reportados, como:</p> <p>Quais são as páginas que tem meta tag <strong><title></strong> e <strong><description></strong> duplicadas, longas demais, curtas demais ou até mesmo as páginas que não possuem title, é só você entrar la e ajustar.</p> <h2 id="3-8211-url-amigável">3 – URL amigável</h2> <p>Uma regra muito importante no SEO é utilizar URLs amigáveis em sua página. Como:</p> <p><strong><a href="http://www.meusite.com.br/nome-do-produto">http://www.meusite.com.br/nome-do-produto</a></strong> e não utilizar <strong><a href="http://www.meusite.com.br/prod001">http://www.meusite.com.br/prod001</a></strong></p> <p>Pois o Google lê sua URL para saber do que se trata aquela página antes mesmo de ler o documento.</p> <p>Então vamos ter atenção nisso ai também.</p> <h2 id="4-8211-imagens">4 – Imagens</h2> <p>As imagens do seu site possuem nomes amigáveis ou não? Quando você vai acrescentar alguma imagem em seu site, você se preocupa com o nome dela?</p> <p>O Google não sabe o que é aquela imagem que você acrescentou, ele só vai entender a partir do momento que você falar para ele, que imagem é esta.</p> <p>Use nomes detalhados e informativos, como:</p> <p><strong>nome-do-produto.jpg</strong> e não <strong>prod001.jpg</strong></p> <p>Use o atributo <strong>ALT</strong> em suas imagens, para falar para o Google o que significa aquela imagem, para que ele entenda melhor sobre ela. Como:</p> <p><img src=“nome-do-produto.jpg” **alt=“O significado de sua imagem”**></p> <p>Pronto! Você acaba de ganhar alguns pontinhos a mais com nosso amigo Google.</p> <h2 id="5-8211-tempo-de-carregamento">5 – Tempo de carregamento</h2> <p>Os usuários querem acessar sites mais rápidos e o Google também gosta bastante de sites rápidos, então comece a se preocupar se seu website está ou não com um bom tempo de carregamento.</p> <ul> <li>Como podemos diminuir o tempo de carregamento do site?</li> </ul> <p><strong>Duas dicas são:</strong></p> <ul> <li>Reduzir seus arquivos CSS e JS, retirando comentários e espaços.</li> <li>Comprimir o tamanho de suas imagens</li> </ul> <p>E podemos fazer isso utilizando um automatizador de tarefas, o meu favorito é o <a href="http://tableless.com.br/gulp-o-novo-automatizador/" title="Automatizador de tarefas">Gulp</a></p> <p>Você também pode utilizar o Page Speed que você terá informações mais precisas sobre isso.</p> <h2 id="6-8211-utilize-css-sprites">6 – Utilize CSS Sprites</h2> <p><a href="http://tableless.com.br/css-sprites/" title="CSS Sprites">CSS Sprites</a> é uma técnica onde podemos combinar várias imagens em uma só, procurando diminuir o número de requisições para o servidor.</p> <p>Um exemplo que eu gosto bastante de usar é:</p> <ul> <li>Supondo que você tenha que ir a padaria comprar 10 pães, mas você tem que trazer 1 por 1. Seria muito cansativo e mais demorado concorda? Mas nós podemos trazer todos estes pães de uma vez só. A mesma coisa é com as requisições no servidor, é muito mais cansativo e demorado para o servidor trazer imagem por imagem, sendo que podemos trazer todas de uma vez só.</li> </ul> <p>O próprio Google utiliza CSS Sprites.</p> <p><a href="http://tableless.com.br/uploads/2015/02/css-sprites.png"><img class="alignnone size-medium wp-image-47162" src="http://tableless.com.br/uploads/2015/02/css-sprites-265x107.png" alt="css-sprites" width="265" height="107" srcset="uploads/2015/02/css-sprites-265x107.png 265w, uploads/2015/02/css-sprites.png 356w" sizes="(max-width: 265px) 100vw, 265px" /></a></p> <h2 id="7-8211-websites-responsivos">7 – Websites responsivos</h2> <p>Não podemos criar nossos sites pensando somente em se ele vai funcionar somente em desktop ou somente em um tipo de tela, ter um site acessível em todas as plataformas é muito importante, pois acessos por dispositivos móveis vem crescendo bastante e isso não irá parar.</p> <p>Então preocupe se o seu website é acessível a todas as telas, seja ela desktop ou mobile, isto é um dos fatores que conta bastante para o Google indexar seu site.</p> <p>Essas são somente algumas dicas para que você venha ter mais vontade em aplicar mais técnicas de SEO em seus websites.</p> </article> <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = "https://tableless.com.br/dicas-de-seo-para-front-end/"; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://tableless.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </section> <aside class="tb-aside"> <div id="div-gpt-ad-1491747715151-0" class="tb-banner-sidebar"> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1491747715151-0'); }); </script> </div> <h2>Últimos posts</h2> <ul> <li><a href="/sketch43-novo-formato-arquivo">O novo formato de arquivo do Sketch 43</a></li> <li><a href="/site-tableless-estatico">Agora o Tableless é estático</a></li> <li><a href="/cursos-schoolofnet">Cursos online com a School of Net</a></li> <li><a href="/manipulando-arquivos-carregados-por-upload-no-laravel">Manipulando arquivos carregados por upload no Laravel</a></li> <li><a href="/scrum-master-e-sua-essencia">Scrum Master e sua essência.</a></li> <li><a href="/logaster-fazendo-seu-logo-de-forma-facil">Logaster – Fazendo seu logo de forma fácil</a></li> <li><a href="/construindo-um-servidor-graphql-em-minutos-com-siler-php">Construindo um servidor GraphQL em minutos com a Siler PHP</a></li> </ul> <h2>Categorias</h2> <ul> <li><a href="/categories/geral">geral</a> (325)</li> <li><a href="/categories/tecnologia-e-tend%C3%AAncias">tecnologia-e-tendências</a> (323)</li> <li><a href="/categories/artigos">artigos</a> (316)</li> <li><a href="/categories/t%C3%A9cnicas-e-pr%C3%A1ticas">técnicas-e-práticas</a> (283)</li> <li><a href="/categories/c%C3%B3digo">código</a> (241)</li> <li><a href="/categories/browsers">browsers</a> (205)</li> <li><a href="/categories/javascript">javascript</a> (186)</li> <li><a href="/categories/html">html</a> (179)</li> <li><a href="/categories/css">css</a> (176)</li> <li><a href="/categories/mercado-e-comportamento">mercado-e-comportamento</a> (117)</li> </ul> </aside> </div> <footer id="tb-footer"> <div class="tb-container"> <ul class="tb-social-links"> <li><a target="_blank" href="http://facebook.com/tablelessbr">Facebook</a></li> <li><a target="_blank" href="http://twitter.com/tableless">Twitter</a></li> <li><a target="_blank" href="" type="application/rss+xml" class="tb-ico-rss">RSS</a></li> <li><a target="_blank" href="http://medium.com/tableless">Medium</a></li> </ul> <div class="tb-nav-footer"> <nav> <h3>Sobre</h2> <a href="https://tableless.com.br/sobre-nos/">Sobre o Tableless</a> <a href="https://tableless.com.br/contato/">Contato</a> <a href="https://tableless.com.br/anuncie-no-tableless/">Anuncie</a> <a href="https://tableless.com.br/seja-um-autor/">Seja um Autor</a> <a href="http://tableless.com.br/servicos/">Fazemos código front-end</a> </nav> <nav> <h3>Acompanhe</h3> <a href="https://www.eventials.com/tableless/" target="_blank" title="Assista algumas vídeo aulas">Webinars</a> <a href="http://forum.tableless.com.br/" target="_blank" title="Pergunte e resposta perguntas no nosso Fórum">Fórum</a> <a href="http://medium.com/tableless/" target="_blank" title="Acompanhe artigos no Medium">Canal no Medium</a> <a href="https://telegram.me/tableless" target="_blank" title="Acompanhe notíficas e novos posts no Telegram">Canal no Telegram</a> </nav> <nav> <h3>Comunidade</h3> <a href="https://github.com/femug/femug" target="_blank" title="Encontro Front-end no Brasil inteiro">Femug</a> <a href="https://www.meetup.com/pt-BR/CSS-SP/" target="_blank" title="Encontro de CSS em São Paulo">MeetupCSS</a> <a href="http://zofe.com.br/" target="_blank" title="Ouça um Podcast brasileiro sobre Front-end">Podcast ZOFE</a> <a href="https://braziljs.org/" target="_blank" title="Um dos maiores eventos de JavaScript e front-end do Brazil do Universo">BrazilJS</a> <a href="http://devnaestrada.com.br/" target="_blank" title="Podcast brasileiro sobre desenvolvimento web">DevNaEstrada</a> <a href="https://github.com/frontendbr/" target="_blank" title="Portando qualquer coisa relacionada ao mundo frontender para o Github">Front-End Brasil</a> </nav> </div> <p class="tb-for-community"> Escrito pela e para a comunidade web brasileira. <a href="https://tableless.com.br/seja-um-autor/">Ajude</a> </p> </div> </footer> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> $(function() { $('#tb-menu li ul').addClass('tb-submenu'); $('.tb-submenu').parent().addClass('tb-submenu-parent'); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script> <script> $(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); }); </script> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-335027-1', 'auto'); ga('send', 'pageview'); </script> <script async src='//www.google-analytics.com/analytics.js'></script> </body> </html>