SEO

16
Maquetación Orientada a SEO

description

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.

Transcript of SEO

Page 1: SEO

Maquetación Orientada a SEO

Page 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

SEO

Page 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>

SEO

Page 4: SEO

<head>

SEO

Page 5: SEO

<head>

1.<title></title>

La parte más importante del head.

En ella incluimos la keyword exacta que posicionamos y parte de información sobre nuestra web.

SEO

Page 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…

SEO

Page 7: SEO

<head>

SEO

Page 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”

SEO

Page 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

SEO

Page 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.

SEO

Page 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.

SEO

Page 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/

SEO

Page 13: SEO

Cross-browsing

Page 14: SEO

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.

CROSSBROWSING

Page 15: SEO

Condicionales

CROSSBROWSING

Page 16: SEO

Programas

CROSSBROWSING