Descargar como PDF, PPTX
Subido porDinamiclerning
SEO
El documento proporciona directrices sobre la maquetación de páginas web orientadas a SEO, enfatizando la importancia de URLs amigables, el uso adecuado de etiquetas HTML y la estructura semántica. Se detallan elementos esenciales como los metatags y el diseño accesible, así como la necesidad de evitar código intrusivo y 'divitis'. Además, se menciona la relevancia del cross-browsing para asegurar la compatibilidad entre diferentes navegadores.
Más contenido relacionado
SEO
- 1.
- 2. SEO URL “amigables” SonURLs 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 bodydeben 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>
- 4.
- 5. SEO <head> 1.<title></title> La parte másimportante del head. En ella incluimos la keyword exacta que posicionamos y parte de información sobre nuestra web.
- 6. SEO <head> 2.METATAGS Los meta-tags sonunas 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…
- 7.
- 8. SEO <body> 1.<div> Maquetación lo másestá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 Comocon 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 Nosreferimos 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 detalleshemos 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/
- 13.
- 14. CROSSBROWSING Cross-browsing El término cross-browserhan 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.
- 15.
- 16.