-
He leído muchos artículos sobre optimización SEO durante este período y descubrí que la mayoría de ellos hablan sobre conocimientos en la etapa de operación, como enlaces externos, enlaces internos en artículos, mejora de relaciones públicas y algunas experiencias hablan sobre optimización de motores de búsqueda específica. . Realmente hay demasiados artículos de este tipo. Si lees demasiados, sentirás que son iguales y no tienen ninguna novedad. Hoy hablaré sobre algo nuevo, principalmente sobre algunas técnicas sobre el diseño HTML en la optimización SEO. El autor es programador de nacimiento. Así que lo que escribí es un poco técnico, espero que puedan entenderme.
Muchas páginas de inicio de sitios web tienen un módulo de mapa de calor que se puede cambiar en forma de presentación de diapositivas (consulte la imagen a continuación).
Este módulo ocupa el 70% de los sitios web nacionales, incluido el sitio web del autor. El código para este efecto suele estar en la parte frontal de la estructura del documento HTML, el más común está debajo de la barra de navegación. El método de implementación no es más que Flash o. Script JS, el código de diseño más utilizado es el siguiente:
<div clase="banner">
<objeto>
versión FLASH
</objeto>
</div>
<div clase="banner">
<tipo de script="texto/javascript">
versión javascript
</script>
</div>
El autor cree que si el código anterior se inserta en la parte frontal del HTML, no solo será perjudicial para la optimización SEO, sino que también será muy deprimente para los usuarios comunes. La desventaja del SEO es: como todos los amigos webmasters saben, la parte frontal. de un documento HTML Esto es lo que los motores de búsqueda valoran más. Si usa JS o FLASH para implementarlo, aunque estos códigos no pueden ser reconocidos por los motores de búsqueda, otras partes importantes se pueden mostrar primero a los motores de búsqueda y estas cosas irreconocibles se mostrarán. más tarde. Lo malo para los usuarios comunes es que este efecto generalmente requiere cambiar entre 4 y 5 imágenes, y el tamaño total de estas imágenes es de al menos aproximadamente 200 KB, ya sea que use JS o FLASH para implementarlo, siempre que lo incruste en un archivo. Documento HTML, el usuario tiene que esperar a que se carguen estas cosas, especialmente cuando la imagen es grande, es muy probable que se atasque en el área de la cabeza, lo que hace que el navegador se congele. Esto es lo más aterrador para los usuarios.
Durante este período, el autor resumió algunas soluciones y, a través de observaciones a largo plazo, la práctica ha demostrado que estas soluciones están bien, las clasificaciones no se ven afectadas y la inclusión es normal.
1. Ajuste de secuencia estructural
Según la experiencia anterior en composición tipográfica y diseño, nuestro código debería verse así:
código HTML:
<cuerpo>
<div class="contenedor">
<div class="header">Contenido del encabezado</div>
<div class="banner">Módulo de efectos de presentación de diapositivas</div>
<div class="content">Contenido de texto</div>
<div class="copyright">Sección de derechos de autor</div>
</div>
</cuerpo>
Código CSS:
cuerpo {margen:0;relleno:0;text-align:centro;}
.contenedor {ancho:980px;margen:0 auto;posición:relativa;fondo:plata;}
.encabezado {altura:200px;altura de línea:200px;fondo:rojo;}
.banner {altura:150px;altura de línea:150px;fondo:amarillo;}
.content {altura:400px;altura de línea:400px;fondo:azul;}
.copyright {altura:50px;altura de línea:50px;fondo:verde;}
El código mejorado del autor es el siguiente:
código HTML:
<cuerpo>
<div class="contenedor">
<div class="header">Contenido del encabezado</div>
<div class="content">Contenido de texto</div>
<div class="copyright">Sección de derechos de autor</div>
<div class="banner">Módulo de efectos de presentación de diapositivas</div>
</div>
</cuerpo>
Código CSS:
cuerpo {margen:0;relleno:0;text-align:centro;}
.contenedor {ancho:980px;margen:0 auto;posición:relativa;fondo:plata;}
.encabezado {altura:200px;altura de línea:200px;fondo:rojo;}
.banner {posición:absoluta;arriba:200px;ancho:980px;alto:150px;alto de línea:150px;fondo:amarillo;}
.content {margin-top:150px;altura:400px;altura de línea:400px;fondo:azul;}
.copyright {altura:50px;altura de línea:50px;fondo:verde;}
A través del análisis comparativo de los códigos anteriores, utilicé la técnica de diseño flotante de posición en CSS. Puede encontrar información relevante sobre el diseño flotante de posición. Asegúrese de dominar este punto de conocimiento, que es muy útil para la optimización SEO.
2. Utilice hábilmente la carga retrasada
código HTML:
<cuerpo>
<div class="contenedor">
<div class="header">Contenido del encabezado</div>
<div class="content">Contenido de texto</div>
<div class="copyright">Sección de derechos de autor</div>
<div class="banner"></div>
</div>
</cuerpo>
código jquery:
$(documento).listo(función() {
ventana.setTimeout(función() {
versión FLASH
$(".banner").html("<object>Aquí es donde se inserta el código FLASH</object>")
versión ajax
$.get(" http://www.flagwind.com/GetBanner.html ", función(datos){
$(".banner").html(datos);
});
}, 3000);
});
El significado general de este código Jquery es que después de cargar el documento, después de 3 segundos, se ejecuta una solicitud AJAX u otra cosa para controlar el contenido en el banner DIV.
Los códigos de las dos soluciones anteriores son solo algunos ejemplos. Puede usarlos en otros lugares, cargar contenido que no tenga nada que ver con SEO más adelante o usar JS para retrasar la carga para su visualización. Sin embargo, también es algo bueno para los usuarios comunes. Este artículo fue creado originalmente por la construcción del sitio web de Shenzhen Flagwind Network www.flagwind.com . No elimine la información de derechos de autor del autor original al reenviarlo, ¡gracias!
Gracias a Shenzhen Qifeng Network por la contribución.