SEO

657 views

Published on

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.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
657
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SEO

  1. 1. MaquetaciónOrientada a SEO
  2. 2. SEO URL “amigables”Son URLs descriptivas del contenido de la página, es decir, que dicen algo sobre elcontenido que se está visualizando en el navegador entre otras características. http://www.misitio.com/contactar.htmlCaracterí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. 3. SEO<head>head y body deben disponer de los contenidos oportunos dentro de cadauna 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. 4. SEO<head>
  5. 5. SEO<head>1.<title></title>La parte más importante del head.En ella incluimos la keyword exacta que posicionamos y parte deinformación sobre nuestra web.
  6. 6. SEO<head>2.METATAGSLos meta-tags son unas etiquetas html que permiten incluir en la cabecerade la página una serie de informaciones útiles para configurar la página ydar cierta información extra sobre la misma.name=”description”: podemos considerarlo simplemente como "el primer texto dela página".name=”robots”: posibilidad de indicar como debe comportarse la araña en lapágina. Dos parametros:- “INDEX”/”NOINDEX”-“FOLLOW”/”NOFOLLOW”name=”keywords”: indicar las keywords por las que debe aparecer esta páginacomo resultado de búsqueda. Usar en h1,alt, title,strong, textos…
  7. 7. SEO<head>
  8. 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. 9. SEO<body>2.NO CÓDIGO INTRUSIVOComo 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 ids yclases para identificarlo en el archivo css externo. 2.2.Si necesitamos asignar eventos onlick, onmouseover, etc. Usaremoslibrerías javascript (jquery, mootools, prototype, etc.) que nos permitan asignarlostambién por ids y clases
  10. 10. SEO<body>2.ESTRUCTURAR INFORMACIÓNh1/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 eltexto plano y que el texto dentro de em. Es usualmente mostrado en negrita.3.ACCESIBILIDADEl atributo alt se emplea como representación alternativa, es decir, como sustitutode la imagen.El atributo title se emplea para proporcionar información adicional, no paraproporcionar información que sustituya al elemento al que se aplica.
  11. 11. SEO<body>4. HTML SEMÁNTICONos 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 loscontenidos de significado.Olvidémonos del diseño para empezar a maquetar: creemos un html correcto quecumpla 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 quepuede tratarse por etiquetas.
  12. 12. SEOCon 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/
  13. 13. Cross-browsing
  14. 14. CROSSBROWSINGCross-browsingEl término cross-browser han existido desde el desarrollo web, comenzó.La historia decross-browser tiene que ver con la historia de la " guerra de los navegadores "a finales de1990 entre el Netscape Navigator y Microsoft Internet Explorer.El Cross-browser permite que un sitio web o aplicación web sea adecuadamenteprestados por todos los navegadores.El mercado de los navegadores se ha ampliado, y se espera la compatibilidad entrenavegadores como Mozilla Firefox , Opera y Safari , además de Internet Explorer.
  15. 15. CROSSBROWSINGCondicionales
  16. 16. CROSSBROWSINGProgramas

×