10 Dicas Rápidas de SEO - #4 Responsividade
31/07/2018Hoje trazemos mais um importante conceito no tocante as otimizações para rankeamento do site nos mecanismos de busca, vamos falar sobre RESPONSIVIDADE.
A importância da responsividade em SEO
� certo que o Google e os outros mecanismos de busca dão muita importância a acessibilidade e velocidade dos sites para o posicionamento nas pesquisas. Um site A responsivo, como imagens menores e conteúdo adequado a telas menores possivelmente ficará a frente de um site B que possui apenas uma resolução. Diante disso, trabalharemos no nosso projeto para transformar nosso website em um portal multi-telas.
O primeiro passo para alcançarmos nosso objetivo é alterarmos a forma com que o navegador interpreta nosso código, inserindo a meta tag viewport na cabeça <head></head> do nosso site:
<meta name="viewport" content="width=device-width, initial-scale=1">Vamos também criar um diretório lib e criar dentro dele um arquivo Stylesheet.css. Esse arquivo será a nossa folha de estilo que conterá as caracterÃsticas especÃficas de cada resolução.
<link rel="stylesheet" href="../lib/Stylesheet.css">Dentro do arquivo Stylesheet.css vamos inserir o código com as media-queries:
* {padding: 0; border: 0; margin: 0; box-sizing: border-box;}
@media screen and (max-width: 480px){
.div1{float:left; width: 50%; height: 100px; background: blue;}
.div2{float:left; width: 50%; height: 100px; background: red;}
.div3{float:left; width: 100%; height: 100px; background: green;}
}
@media screen and (min-width: 481px) and (max-width: 768px){
.div1{float:left; width: 33.33333%; height: 100px; background: blue;}
.div2{float:left; width: 33.33333%; height: 200px; background: red;}
.div3{float:left; width: 33.33333%; height: 50px; background: green;}
}
@media screen and (min-width: 769px) and (max-width: 1199px){
.div1{float:left; width: 100%; height: 100px; background: black;}
.div2{float:left; width: 100%; height: 200px; background: gray;}
.div3{float:left; width: 100%; height: 50px; background: pink;}
}
@media screen and (min-width: 1200px){
.div1{float:left; width: 100%; height: 100px; background: blue;}
.div2{float:left; width: 100%; height: 200px; background: red;}
.div3{float:left; width: 100%; height: 50px; background: green;}
}No corpo (body) da página produtos.php vamos criar as três divs estilizadas pelo css:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>Suceso nos códigos e na vida!
Posts Relacionados
