Rafaelcgstz: Seo

Web designers e desenvolvedores têm muitas responsabilidades quando se trata de construir sites. Desde a criação de um layout sólida para o front-end, para escrever código limpo, para que o site funciona sem bugs - há muita coisa envolvida. No entanto, uma coisa que é muitas vezes negligenciada e deve cair sobre o designer e desenvolvedor é search engine optimization. Aqui estão sete maneiras designers e desenvolvedores podem melhores práticas de SEO.

1. Evite modelos de imagem pesados

Não é nenhum segredo que as imagens muitas vezes levam a projetos pesado que pode causar mais do que os tempos de carga desejada. pontos de dados cada vez mais ao Google enfatizando a velocidade em sua página de fatores ranking. Se você não é capaz de cortar em imagens, imagens do projeto de modo que possam ser repetidas em CSS. Com os modernos efeitos CSS, como degradês e sombras pode ser alcançado sem o uso de imagens, como exigido no passado.

2. Não design links de navegação em imagens

Uma das maneiras mais fáceis para o Google para determinar o que uma página é sobre é através do texto âncora de um link. Navegação faz exatamente isso, ao mesmo tempo, adicionando uma média de organização também. Com ferramentas como o kit de tipos disponíveis, a desculpa de navegação imagem baseada não existe mais.

3. Condensar CSS e JS arquivos em um único documento

Como mencionado acima, a velocidade página está se tornando um grande jogador no ranking fatores. Uma maneira rápida e fácil de obter uma vitória pequena condensando CSS e JS em um documento de cada. Para cada documento que está listado no código de uma nova chamada do servidor é exigido, aumentando assim o tempo de carregamento. Ao diminuir esse número para apenas uma chamada para cada tipo de arquivo, você diminui o número de chamadas, diminuindo o tempo de carregamento.

4. Mantenha tag cabeçalho perto do topo do código

As tags de cabeçalho geralmente indicam o título de uma parte do conteúdo. Freqüentemente, este é o local onde SEOs frases-chave que estão a tentar a classificação. As teorias são de que o conteúdo no topo de um documento HTML tem mais peso do que a de conteúdo em áreas como o rodapé. tags H1 devem ser usadas para títulos do conteúdo.

5. Use CSS Sprites

No PubCon Sul 2011, Aaron Shear, o SEO para Zappos falou sobre a importância de sprites CSS, uma forma astuta de combinar imagens utilizando CSS para diminuir o tempo de carga. Embora o conceito de fazê-lo manualmente pode ser assustador, o Google recomenda uma grande ferramenta chamada SpriteMe, que eu já vi ótimos resultados com pessoal.

6. Mantenha as linhas tag longe do topo

Uma das primeiras coisas que você quer que o Google vê no seu código é a palavras-chave relacionadas a essa página. Muitas vezes os designers colocar slogans e frases de no cabeçalho de um projeto. Este não é o ideal como a primeira peça de conteúdo do Google vai ver em cada página é que o slogan ou linha de tag que não serão relacionados para essa página. Se você não é capaz de migrar para essa outra parte do site, é melhor colocá-lo em uma imagem.

7. Pare de usar text-indent:-9999px

Os programadores têm usado frequentemente text-indent:-9999px para enganar os motores a pensar que existe uma palavra-chave real em uma imagem. Se você é forçado a usar uma imagem em vez de texto, não tente enganar o mecanismo de busca mundos maiores e mais sofisticadas. Use uma tag alt. Eles sabem que as pessoas fazem isso ea equipe do Google também se manifestou contra isso várias vezes.

Vamos aprender como colocar uma caixa de redes sociais como a da imagem do lado que irá dar um toque a mais no seu site de criatividade. Mais cuidado, tem muita gente que não gosta!

`1. COMEÇANDO`

Primeiramente teremos de criar uma página HTML e adicionar alguns div devidamente identificados relativamente à estrutura da página.

  <div id="wrapper">

            <div id="page-wrap">

                    <div id="content">

                        <div id="main">

                        </div>

                        <div id="sidebar">

                        </div>

                    </div>

                    <!-- O Conteúdo acaba aqui -->

            </div>

            <!-- O page-wrap acaba aqui -->

</div>

`2. SEGUNDO PASSO`

Adicione uma div abaixo da div page-wrap com os seus botões das redes sociais, como o Facebook, Twitter, entre outros.

<div id="floating-box">

                <div id="box">

                    <!-- Aqui insere o código dos botões -->

                </div>

              </div>

`3. INTRODUZIR DADOS`

É necessário para questões de teste, ter algum conteúdo. Se está a introduzir a caixa flutuante num site existente com conteúdo, salte este passo. Se não, vá aqui e copie algum texto e insira nas div main e sidebar.

`4. INTRODUZIR A MAGIA`

Para que a magia aconteça, é necessário introduzir algum código jQuery na tag head.

$(function() {
     var offset = $("#box").offset();
     var topPadding = 15;
     $(window).scroll(function() {
         if ($(window).scrollTop() &gt; offset.top) {
             $("#box").stop().animate({
              marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });

`5. ESTILIZAR`

A página e a caixa flutuante necessitam agora de alguma estilização com CSS. Você poderá dar asas à sua imaginação e criar de acordo com o seu gosto, no entanto deixamos uma sugestão valiosa.

  <style type="text/css">

  * { margin: 0; padding: 0; }

  body { font: 14px/1.4 Verdana, Arial, sans-serif; font-weight: normal;background-color: #f2f2f2;float: left;width: 100%; color: #333333;

}

  #wrapper{width: 800px;margin: 0 auto;padding: 0px;}

  #content{float: left;width: 100%;border: 1px solid #B5076D;background-color: #FFFFFF;font-size: 12px;line-height: 20px;}

  #page-wrap {  position: relative;float: left; margin: 50px 0;}

  h1{font-size: 1.6em;color: #B5076D; font-style: italic;padding: 20px;}

  p { margin: 0 0 10px 0; }

  #main { width: 460px; float: left; padding: 20px; background-color: #f1f1f1;border: 1px solid #DDDDDD; margin: 20px;display: inline;}

  #sidebar { width: 215px; float: right;border: 1px solid #DDDDDD; background-color: #f1f1f1;margin: 20px; display: inline;}

  #sidebar ul{padding: 10px;}

  #sidebar ul li{font-size: 0.9em;margin: 0 0 0 20px;}

  </style>

Além do código acima, introduza este código CSS para embelezar um pouco a caixa

  #box{position: absolute;left: -70px;border: 1px solid #B5076D;

 border-right: 0px;padding: 10px;background-color: #FFF;}

#box div{margin: 10px 0;}

E já está. Uma caixa flutuante para as redes sociais em 5 minutos!

Rafaelcgstz

Pesquise

7 Maneiras de otimizar seu site