-
Li muitos artigos sobre otimização de SEO nesse período e descobri que a maioria deles fala sobre conhecimento na fase de operação, como links externos, links internos em artigos, melhoria de relações públicas, e alguma experiência fala sobre otimização de mecanismos de busca específicos . Na verdade, existem muitos artigos desse tipo. Se você ler muitos deles, sentirá que são iguais e não têm frescura. Hoje falarei sobre algo novo, principalmente sobre algumas técnicas de layout HTML na otimização de SEO. O autor é programador de nascimento. Então, o que escrevi é um pouco técnico, espero que você possa me entender.
Muitas páginas iniciais de sites possuem um módulo de mapa de calor que pode ser alternado na forma de uma apresentação de slides (veja a imagem abaixo)
Este módulo ocupa 70% dos sites nacionais, incluindo o site do autor. O código para este efeito geralmente fica na parte frontal da estrutura do documento HTML, o mais comum fica na barra de navegação. O método de implementação nada mais é do que Flash ou. Script JS, o código de layout mais comumente usado é o seguinte:
<div class="banner">
<objeto>
Versão FLASH
</objeto>
</div>
<div class="banner">
<script type="texto/javascript">
Versão Javascript
</script>
</div>
O autor acredita que se o código acima for inserido na parte frontal do HTML, não será apenas prejudicial para a otimização de SEO, mas também muito deprimente para os usuários comuns. A desvantagem do SEO é: como todos os amigos webmasters sabem, a parte frontal. de um documento HTML Isso é o que os mecanismos de pesquisa valorizam mais. Se você usar JS ou FLASH para implementá-lo, embora esses códigos não possam ser reconhecidos pelos mecanismos de pesquisa, outras partes importantes podem ser exibidas primeiro aos mecanismos de pesquisa, e essas coisas irreconhecíveis serão exibidas. mais tarde. O ruim para usuários comuns é que esse efeito geralmente requer alternar entre 4 e 5 imagens, e o tamanho total dessas imagens é de pelo menos cerca de 200 KB, quer você use JS ou FLASH para implementá-lo, desde que você o incorpore em um. Documento HTML, o usuário Você tem que esperar que essas coisas sejam carregadas. Principalmente quando a imagem é grande, é muito provável que fique presa na área da cabeça, fazendo com que o navegador congele.
Durante este período, o autor resumiu algumas soluções e através da observação a longo prazo, a prática provou que estas soluções são aceitáveis, as classificações não são afetadas e a inclusão é corajosamente partilhada com todos aqui.
1. Ajuste de sequência estrutural
De acordo com a experiência anterior em composição e layout, nosso código deve ficar assim:
Código HTML:
<corpo>
<div class="contêiner">
<div class="header">Conteúdo do cabeçalho</div>
<div class="banner">Módulo de efeito de apresentação de slides</div>
<div class="content">Conteúdo de texto</div>
<div class="copyright">Seção de direitos autorais</div>
</div>
</body>
Código CSS:
corpo {margem:0;padding:0;text-align:center;}
.container {largura:980px;margem:0 automático;posição:relativa;fundo:prata;}
.header {altura:200px;altura da linha:200px;fundo:vermelho;}
.banner {altura:150px;altura da linha:150px;fundo:amarelo;}
.content {altura:400px;altura da linha:400px;fundo:azul;}
.copyright {altura:50px;altura da linha:50px;fundo:verde;}
O código aprimorado do autor é o seguinte:
Código HTML:
<corpo>
<div class="contêiner">
<div class="header">Conteúdo do cabeçalho</div>
<div class="content">Conteúdo de texto</div>
<div class="copyright">Seção de direitos autorais</div>
<div class="banner">Módulo de efeito de apresentação de slides</div>
</div>
</body>
Código CSS:
corpo {margem:0;padding:0;text-align:center;}
.container {largura:980px;margem:0 automático;posição:relativa;fundo:prata;}
.header {altura:200px;altura da linha:200px;fundo:vermelho;}
.banner {posição:absoluta;topo:200px;largura:980px;altura:150px;altura da linha:150px;fundo:amarelo;}
.content {margem-topo:150px;altura:400px;altura da linha:400px;fundo:azul;}
.copyright {altura:50px;altura da linha:50px;fundo:verde;}
Através da análise comparativa dos códigos acima, eu realmente usei a técnica de layout flutuante de posição em CSS. Você pode encontrar informações relevantes sobre layout flutuante de posição. Certifique-se de dominar este ponto de conhecimento, que é muito útil para otimização de SEO.
2. Use o carregamento atrasado com habilidade
Código HTML:
<corpo>
<div class="contêiner">
<div class="header">Conteúdo do cabeçalho</div>
<div class="content">Conteúdo de texto</div>
<div class="copyright">Seção de direitos autorais</div>
<div class="banner"></div>
</div>
</body>
Código Jquery:
$(documento).ready(function() {
window.setTimeout(função() {
Versão FLASH
$(".banner").html("<object>É aqui que o código FLASH é inserido</object>")
Versão Ajax
$.get(" http://www.flagwind.com/GetBanner.html ", função(dados){
$(".banner").html(dados);
});
}, 3.000);
});
O significado geral deste código Jquery é que após o carregamento do documento, após 3 segundos, execute uma solicitação AJAX ou outra coisa para controlar o conteúdo do banner DIV.
Os códigos das duas soluções acima são apenas alguns exemplos. Você pode usá-los em outros lugares, carregar algum conteúdo que não tenha nada a ver com SEO posteriormente ou usar JS para atrasar o carregamento para exibição. motores No entanto, também é uma coisa boa para usuários comuns. Este artigo foi originalmente criado pela construção do site de Shenzhen Flagwind Network www.flagwind.com . Por favor, não exclua as informações de direitos autorais do autor original ao encaminhar, obrigado!
Obrigado à Shenzhen Qifeng Network pela contribuição