Post on 12-Jun-2015
description
Maquetación Orientada a 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
<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
<head>
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
<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
<head>
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
<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
<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
<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
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
Cross-browsing
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
Condicionales
CROSSBROWSING
Programas
CROSSBROWSING