En este resumen te damos las herramientas básicas para optimizar tu diseño web teniendo en cuenta el posterior posicionamiento SEO en los diferentes buscadores.
2. SEO
URL “amigables”
Son URLs descriptivas del contenido de la página, es decir, que dicen algo sobre el
contenido que se está visualizando en el navegador entre otras características.
http://www.misitio.com/contactar.html
Características de las URLs amigables:
Fáciles de escribir y son descriptivas del contenido.
Muestran la estructura del sitio.
Son estéticas para poner en catálogos, folletos y otros documentos.
Promueven la usabilidad evitando ser largas y complejas.
Consejos:
Evitar espacios en blanco y signos de puntuación en los nombres de archivos y carpetas.
Todas las letras que las componen en minúsculas.
Evitan tecnicismos de programación
3. SEO
<head>
head y body deben disponer de los contenidos oportunos dentro de cada
una de esas etiquetas y siempre dentro de estas.
<html>
<head>
- title y metatags
- llamadas a scripts javascript
- llamadas a css
- llamadas a etiquetas link: alternate, cannonical, etc.
</head>
<body>
- contenido real del documento
- layout y contenidos en html semántico
</body>
</html>
6. SEO
<head>
2.METATAGS
Los meta-tags son unas etiquetas html que permiten incluir en la cabecera
de la página una serie de informaciones útiles para configurar la página y
dar cierta información extra sobre la misma.
name=”description”: podemos considerarlo simplemente como "el primer texto de
la página".
name=”robots”: posibilidad de indicar como debe comportarse la araña en la
página. Dos parametros:
- “INDEX”/”NOINDEX”
-“FOLLOW”/”NOFOLLOW”
name=”keywords”: indicar las keywords por las que debe aparecer esta página
como resultado de búsqueda. Usar en h1,alt, title,strong, textos…
8. SEO
<body>
1.<div>
Maquetación lo más estándar y sencilla posible.
<body>
<div id="header"> </div>
<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
NO “divitis”
9. SEO
<body>
2.NO CÓDIGO INTRUSIVO
Como con el head, debemos evitar usar javascript o css en medio del documento:
2.1.Si necesitamos dar un estilo especial a lo que sea usaremos id's y
clases para identificarlo en el archivo css externo.
2.2.Si necesitamos asignar eventos onlick, onmouseover, etc. Usaremos
librerías javascript (jquery, mootools, prototype, etc.) que nos permitan asignarlos
también por id's y clases
10. SEO
<body>
2.ESTRUCTURAR INFORMACIÓN
h1/h2/h3…: "h1" representa el titular principal de la página. Reservamos “h2 h3 …”
para titulares para el contenido de la página.
La técnica más extendida es incluir en el titular el nombre de la página: la keyword.
<strong></strong>: El texto dentro de este tag debería ser más importante que el
texto plano y que el texto dentro de em. Es usualmente mostrado en negrita.
3.ACCESIBILIDAD
El atributo alt se emplea como representación alternativa, es decir, como sustituto
de la imagen.
El atributo title se emplea para proporcionar información adicional, no para
proporcionar información que sustituya al elemento al que se aplica.
11. SEO
<body>
4. HTML SEMÁNTICO
Nos referimos a una página web en la que la estructura html está bien hecha,
aprovechando la semántica que brinda el html, y por tanto dota por si sola a los
contenidos de significado.
Olvidémonos del diseño para empezar a maquetar: creemos un html correcto que
cumpla estos 3 propósitos:
4.1. Semántica correcta para cada contenido que aparece en el diseño.
4.2. Permitir al css identificar cualquier elemento por separado: usando los atributos
"id" y "class" con sabiduría.
4.3.No atributos innecesarios: el css no necesita un id y una clase para todo ya que
puede tratarse por etiquetas.
12. SEO
Con estos detalles hemos conseguido una maqueta orientada a SEO
o
una maqueta bien hecha que cumple estándare
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
14. CROSSBROWSING
Cross-browsing
El término cross-browser han existido desde el desarrollo web, comenzó.La historia de
cross-browser tiene que ver con la historia de la " guerra de los navegadores "a finales de
1990 entre el Netscape Navigator y Microsoft Internet Explorer.
El Cross-browser permite que un sitio web o aplicación web sea adecuadamente
prestados por todos los navegadores.
El mercado de los navegadores se ha ampliado, y se espera la compatibilidad entre
navegadores como Mozilla Firefox , Opera y Safari , además de Internet Explorer.