-
Ich habe in dieser Zeit viele Artikel über SEO-Optimierung gelesen und festgestellt, dass die meisten davon über Wissen in der Betriebsphase sprechen, wie z. B. externe Links, interne Links in Artikeln, PR-Verbesserung, und einige Erfahrungsberichte sprechen über spezifische Suchmaschinenoptimierung . Es gibt wirklich zu viele Artikel dieser Art. Wenn Sie zu viele davon lesen, werden Sie das Gefühl haben, dass sie gleich sind und nicht mehr aktuell sind. Heute werde ich über etwas Neues sprechen, hauptsächlich über einige Techniken zum HTML-Layout in der SEO-Optimierung. Der Autor ist von Geburt an Programmierer. Was ich geschrieben habe, ist also ein wenig technisch. Ich hoffe, Sie können mich verstehen.
Viele Website-Homepages verfügen über ein Heatmap-Modul, das in Form einer Diashow umgeschaltet werden kann (siehe Bild unten).
Dieses Modul belegt 70 % der inländischen Websites, einschließlich der Website des Autors. Der Code für diesen Effekt befindet sich häufig im vorderen Teil der HTML-Dokumentstruktur, am häufigsten unter der Navigationsleiste. Die Implementierungsmethode ist nichts anderes als Flash oder JS-Skript, der am häufigsten verwendete Layoutcode lautet wie folgt:
<div class="banner">
<Objekt>
FLASH-Version
</object>
</div>
<div class="banner">
<script type="text/javascript">
Javascript-Version
</script>
</div>
Der Autor glaubt, dass das Einfügen des oben genannten Codes in den vorderen Teil von HTML nicht nur der SEO-Optimierung schadet, sondern auch für normale Benutzer sehr deprimierend ist. Der Nachteil von SEO ist: Wie alle Webmaster-Freunde wissen, ist der vordere Teil Dies ist es, worauf Suchmaschinen mehr Wert legen, wenn Sie JS oder FLASH zur Implementierung verwenden. Obwohl diese Codes von Suchmaschinen nicht erkannt werden können, können andere wichtige Teile zuerst für Suchmaschinen angezeigt werden, und diese nicht erkennbaren Dinge werden angezeigt später. Das Schlimme für normale Benutzer ist, dass dieser Effekt normalerweise das Umschalten zwischen 4 und 5 Bildern erfordert und die Gesamtgröße dieser Bilder mindestens etwa 200 KB beträgt. Unabhängig davon, ob Sie JS oder FLASH zur Implementierung verwenden, solange Sie ihn in ein Bild einbetten HTML-Dokument, der Benutzer muss warten, bis diese Dinge geladen sind. Insbesondere wenn das Bild groß ist, bleibt es sehr wahrscheinlich im Kopfbereich hängen, was für Benutzer am erschreckendsten ist.
Während dieser Zeit hat der Autor einige Lösungen zusammengefasst und durch Langzeitbeobachtung hat die Praxis bewiesen, dass diese Lösungen in Ordnung sind, die Rankings nicht beeinträchtigt werden und die Einbeziehung normal ist. Ich teile sie hier mutig mit allen.
1. Anpassung der Struktursequenz
Nach bisherigen Erfahrungen mit Schriftsatz und Layout sollte unser Code so aussehen:
HTML-Code:
<Körper>
<div class="container">
<div class="header">Header-Inhalt</div>
<div class="banner">Diashow-Effektmodul</div>
<div class="content">Textinhalt</div>
<div class="copyright">Copyright-Abschnitt</div>
</div>
</body>
CSS-Code:
body {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.header {height:200px;line-height:200px;background:red;}
.banner {height:150px;line-height:150px;background:gelb;}
.content {height:400px;line-height:400px;background:blue;}
.copyright {height:50px;line-height:50px;background:green;}
Der verbesserte Code des Autors lautet wie folgt:
HTML-Code:
<Körper>
<div class="container">
<div class="header">Header-Inhalt</div>
<div class="content">Textinhalt</div>
<div class="copyright">Copyright-Abschnitt</div>
<div class="banner">Diashow-Effektmodul</div>
</div>
</body>
CSS-Code:
body {margin:0;padding:0;text-align:center;}
.container {width:980px;margin:0 auto;position:relative;background:silver;}
.header {height:200px;line-height:200px;background:red;}
.banner {position:absolute;top:200px;width:980px;height:150px;line-height:150px;background:gelb;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}
.copyright {height:50px;line-height:50px;background:green;}
Durch die vergleichende Analyse der oben genannten Codes habe ich tatsächlich die Position-Floating-Layout-Technik in CSS verwendet. Sie können diesen Wissenspunkt unbedingt beherrschen, der für die SEO-Optimierung sehr nützlich ist.
2. Setzen Sie das verzögerte Laden geschickt ein
HTML-Code:
<Körper>
<div class="container">
<div class="header">Header-Inhalt</div>
<div class="content">Textinhalt</div>
<div class="copyright">Copyright-Abschnitt</div>
<div class="banner"></div>
</div>
</body>
JQuery-Code:
$(document).ready(function() {
window.setTimeout(function() {
FLASH-Version
$(".banner").html("<object>Hier wird der FLASH-Code eingefügt</object>")
Ajax-Version
$.get(" http://www.flagwind.com/GetBanner.html ", function(data){
$(".banner").html(data);
});
}, 3000);
});
Die allgemeine Bedeutung dieses JQuery-Codes besteht darin, dass nach dem Laden des Dokuments nach 3 Sekunden eine AJAX-Anfrage oder etwas anderes ausgeführt wird, um den Inhalt im Banner-DIV zu steuern.
Die Codes der beiden oben genannten Lösungen sind nur einige Beispiele. Sie können sie an anderen Stellen verwenden, einige Inhalte laden, die nichts mit SEO zu tun haben, oder JS verwenden, um das Laden für die Anzeige zu verzögern Allerdings ist es auch eine gute Sache für normale Benutzer. Dieser Artikel wurde ursprünglich von Shenzhen Website Construction Flagwind Network www.flagwind.com erstellt. Bitte löschen Sie beim Weiterleiten nicht die Copyright-Informationen des ursprünglichen Autors.
Vielen Dank an Shenzhen Qifeng Network für den Beitrag