-
J'ai lu beaucoup d'articles sur l'optimisation du référencement au cours de cette période et j'ai constaté que la plupart d'entre eux parlent de connaissances au stade opérationnel, telles que les liens externes, les liens internes dans les articles, l'amélioration des relations publiques et certaines expériences parlent d'optimisation spécifique des moteurs de recherche. . Il y a vraiment trop d'articles de ce type. Si vous en lisez trop, vous aurez l'impression qu'ils sont identiques et n'ont aucune fraîcheur. Aujourd'hui, je vais parler de quelque chose de nouveau, principalement de certaines techniques de mise en page HTML dans l'optimisation du référencement. L'auteur est programmeur de naissance. Donc ce que j'ai écrit est un peu technique, j'espère que vous pourrez me comprendre.
De nombreuses pages d'accueil de sites Web disposent d'un module de carte thermique qui peut être activé sous la forme d'un diaporama (voir l'image ci-dessous)
Ce module occupe 70 % des sites Web nationaux, y compris le site Web de l'auteur. Le code pour cet effet se trouve souvent au début de la structure du document HTML, le plus courant se trouve sous la barre de navigation. La méthode d'implémentation n'est rien d'autre que Flash ou. Script JS, le code de mise en page le plus couramment utilisé est le suivant :
<div class="bannière">
<objet>
Version FLASH
</objet>
</div>
<div class="bannière">
<script type="text/javascript">
Version Javascript
</script>
</div>
L'auteur estime que si le code ci-dessus est inséré dans la partie avant du HTML, cela sera non seulement préjudiciable à l'optimisation du référencement, mais aussi très déprimant pour les utilisateurs ordinaires. L'inconvénient du référencement est le suivant : comme le savent tous les amis webmasters, la partie avant. d'un document HTML C'est ce que les moteurs de recherche apprécient le plus. Si vous utilisez JS ou FLASH pour l'implémenter, bien que ces codes ne puissent pas être reconnus par les moteurs de recherche, d'autres parties importantes peuvent être affichées en premier par les moteurs de recherche, et ces éléments méconnaissables seront affichés. plus tard. Le problème pour les utilisateurs ordinaires est que cet effet nécessite généralement de basculer entre 4 et 5 images, et la taille totale de ces images est d'au moins environ 200 Ko, que vous utilisiez JS ou FLASH pour l'implémenter, à condition de l'intégrer dans un fichier. Document HTML, l'utilisateur doit attendre que ces éléments soient chargés. Surtout lorsque l'image est grande, elle est très susceptible de rester bloquée dans la zone d'en-tête, provoquant le blocage du navigateur. C'est la chose la plus terrifiante pour les utilisateurs.
Au cours de cette période, l'auteur a résumé certaines solutions et grâce à une observation à long terme, la pratique a prouvé que ces solutions sont correctes, que les classements ne sont pas affectés et que leur inclusion est normale. Je les partage hardiment avec tout le monde ici.
1. Ajustement de la séquence structurelle
D'après l'expérience passée en matière de composition et de mise en page, notre code devrait ressembler à ceci :
Code HTML :
<corps>
<div class="conteneur">
<div class="header">Contenu de l'en-tête</div>
<div class="banner">Module d'effet de diaporama</div>
<div class="content">Contenu texte</div>
<div class="copyright">Section Droits d'auteur</div>
</div>
</corps>
Code CSS :
corps {margin:0;padding:0;text-align:center;}
.container {largeur : 980px ; marge : 0 auto ; position : relative ; arrière-plan : argent ;}
.header {hauteur : 200 px ; hauteur de ligne : 200 px ; arrière-plan : rouge ;}
.banner {hauteur : 150 px ; hauteur de ligne : 150 px ; arrière-plan : jaune ;}
.content {hauteur : 400 px ; hauteur de ligne : 400 px ; arrière-plan : bleu ;}
.copyright {hauteur : 50px ; hauteur de ligne : 50px ; arrière-plan : vert ;}
Le code amélioré de l'auteur est le suivant :
Code HTML :
<corps>
<div class="conteneur">
<div class="header">Contenu de l'en-tête</div>
<div class="content">Contenu texte</div>
<div class="copyright">Section Droits d'auteur</div>
<div class="banner">Module d'effet de diaporama</div>
</div>
</corps>
Code CSS :
corps {margin:0;padding:0;text-align:center;}
.container {largeur : 980px ; marge : 0 auto ; position : relative ; arrière-plan : argent ;}
.header {hauteur : 200 px ; hauteur de ligne : 200 px ; arrière-plan : rouge ;}
.banner {position : absolue ; haut : 200 px ; largeur : 980 px ; hauteur : 150 px ; hauteur de ligne : 150 px ; arrière-plan : jaune ;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}
.copyright {hauteur : 50px ; hauteur de ligne : 50px ; arrière-plan : vert ;}
Grâce à l'analyse comparative des codes ci-dessus, j'ai en fait utilisé la technique de mise en page flottante Position en CSS. Vous pouvez trouver des informations pertinentes sur la mise en page flottante Position. Assurez-vous de maîtriser ce point de connaissance, qui est très utile pour l'optimisation du référencement.
2. Utilisez habilement le chargement différé
Code HTML :
<corps>
<div class="conteneur">
<div class="header">Contenu de l'en-tête</div>
<div class="content">Contenu texte</div>
<div class="copyright">Section Droits d'auteur</div>
<div class="bannière"></div>
</div>
</corps>
Code Jquery :
$(document).ready(function() {
window.setTimeout(fonction() {
Version FLASH
$(".banner").html("<object>C'est ici que le code FLASH est inséré</object>")
Version Ajax
$.get(" http://www.flagwind.com/GetBanner.html ", fonction(données){
$(".bannière").html(données);
});
}, 3000);
});
La signification générale de ce code Jquery est qu'après le chargement du document, après 3 secondes, exécutez une requête AJAX ou autre chose pour contrôler le contenu de la bannière DIV.
Les codes des deux solutions ci-dessus ne sont que quelques exemples. Vous pouvez les utiliser à d'autres endroits, charger ultérieurement du contenu qui n'a rien à voir avec le référencement ou utiliser JS pour retarder le chargement pour l'affichage. Cela n'aura pas un grand impact sur la recherche. moteurs. Cependant, c'est aussi une bonne chose pour les utilisateurs ordinaires. Cet article a été créé à l'origine par la construction du site Web de Shenzhen Flagwind Network www.flagwind.com . Veuillez ne pas supprimer les informations de droit d'auteur de l'auteur original lors du transfert, merci !
Merci à Shenzhen Qifeng Network pour la contribution