2009 09 21 Optimizacioncodigofuente V1

Jornada “Marketing en buscadores en el mundo digital” Rafael Pedraza Jiménez Departament de Comunicació Universitat Pompeu Fabra [email_address] Taller “Search Engine Optimization” Optimización del código fuente

Factores de posicionamiento (I)‏ Internos : URL: dirección del sitio (p.e. www. museo .com). Contenido : Texto. Multimedia, pero solo metadatos. Navegación: texto de los enlaces. Código fuente: código estándar y de calidad . Actualización. Reputación: Antigüedad URL, evolución de los enlaces de entrada.

Factores de posicionamiento (II)‏ Externos : Número de enlaces de entrada. Reputación de los enlaces. Texto de los enlaces.

Dimensiones en la calidad del código fuente Código libre de errores: documentos bien formados Separación de contenido y presentación: documentos compatibles y fácilmente transformables Buenas prácticas: documentos con marcado semántico

Código libre de errores Casuística: Elementos no cerrados Elementos mal anidados Ausencia de elementos obligatorios Uso de elementos depreciados Chequeo: Editores de páginas web Validadores en línea

Ejemplo de los errores más comunes: <!DOCTYPE html PUBLIC “-//W3C//DTD XTHML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=” http://www.w3.org/1999/xhtml ” lang=” es ” xml:lang=” es ”> <head> <meta name=“ author ” content=“ Pepito Grillo ”> </head> <body> <center><h1> No mientas Pinocho </center></h1> </body> </html> Código libre de errores (II)‏

Elementos depreciados applet basefont center dir font isindex menu s strike u Alternativas: usar elementos XHTML o CSS http :// www.codehelp.co.uk / html / deprecated.html

Atributos depreciados align alink background bgcolor clear compact color border hspace Link name Alternativas: CSS for deprecated attributes http :// www.punkchip.com /2007/02/ css - deprecated - attributes -1/ noshade nowrap size start text type value vlink width vspace

Separación de contenido y presentación Problemas típicos: Uso de tablas para estructurar la presentación (layout)‏ Uso de elementos semánticos para dar formato (<blockquote>). Estándar recomendado: XHTML: contenido CSS: presentación Chequeo: Editores Validadores en línea

Buenas prácticas Codificación semántica: Uso de metadatos. Ejemplos: Elementos: title , meta , DC , … Atributos: id , alt , cite , class , name , rel , rev, summary , … Metadatos vinculados: RDF Marcado semántico. Ejemplos: abbr , address , acronym , blockquote , … h1 , h2 , ... Chequeo: Análisis automático Análisis “manual”

Palabras clave, metadatos y código fuente Título de la página <title> Metadatos <meta name=“” content=“” /> Encabezamientos <h1> , <h2> … *Texto de los enlaces <a href=“” title=“”> Texto </a> Atributos de texto alternativo/descriptivo title , alt , summary Resaltado del texto más significativo <strong> , <em>

Elementos semánticos abbr *acronym address blockquote caption cite code dd dfn dl dt h n label legend link meta option q select thead tfoot title

Elementos semánticos - II El <abbr> W3C </abbr> define la <dfn> accesibilidad web </dfn> como <blockquote> ”el conjunto de técnicas que permiten a las personas con discapacidades utilizar la web” </blockquote> . Otros términos relacionados con la accesibilidad web son: <dl> <di><dt> Usabilidad web: </dt> <dd> es la disciplina… </dd></di> <di><dt> Arquitectura de la información: </dt> <dd> es la ciencia… </dd></di> </dl> Puede encontrar más información sobre la accesibilidad web en la <cite cite=“http://www.w3.org/WAI/”> Iniciativa para la accesibilidad Web </cite> .

Atributos semánticos alt cite class hreflang id label lang longdesc rel rev summary title

<img src=“ catedralNotreDame.jpg ” alt=“Vista aérea de la Catedral de Notre Dame de París” /> <a href=“http://www.notredamedeparis.fr/” title=“Sitio web oficial de la Catedral de Notre Dame” > Catedral de Notre Dame </a> Atributos semánticos - II

Microformatos hCalendar hCard rel-license rel-nofollow rel-tag VoteLinks XFN XMDP Lista de microformatos: http://microformats.org/wiki/Main_Page

Microformatos - II <div class="vevent"> <a class="url" href="http://www.web2con.com/"> http://www.web2con.com/ </a> <span class="summary"> Web 2.0 Conference </span>: <abbr class="dtstart" title="2007-10-05"> October 5 </abbr> - <abbr class="dtend" title="2007-10-20"> 19 </abbr>, at the <span class="location"> Argent Hotel, San Francisco, CA </span> </div> http :// www.web2con . com / Web 2.0 Conference: October 5- 19, at the Argent Hotel, San Francisco, CA -- <div id="hcard-Rafael-Pedraza" class="vcard"> <span class="fn"> Rafael Pedraza </span> <div class="org"> Universitat Pompeu Fabra </div> <a class="email" href="mailto:rafael.pedraza@upf.edu"> [email_address] </a> </div> Rafael Pedraza Universitat Pompeu Fabra [email_address]

Prácticas desaconsejadas Las técnicas de posicionamiento fraudulentas (black hat SEO) sólo funcionan a corto plazo y son penalizadas . Aún así, estas prácticas son habituales. En relación al código fuente es necesario tener cuidado con: Spamming keywords Texto oculto

Conclusiones - I La calidad del código fuente se consigue mediante el respeto de los estándares . Esto implica: La creación de páginas se aleja de los usuarios: Deben ser conscientes de aspectos técnicos que antes podían obviar. Obliga a actualizar el software Conversión retrospectiva: Dificultades técnicas Altos costes en tiempo o en dinero (o ambos)‏ Imperativo para nuevos sitios nuevos: asegura la inversión, facilita el mantenimiento, etc. Recomendable para sitios anteriores.

Conclusiones - II Ventajas generales: Contenido compatible con: Diferentes agentes de usuario Futuros agentes de usuario Futuras formas de procesamiento y explotación Extraordinaria facilidad de mantenimiento Optimización SEO Accesibilidad Para el profesional: Plus de competitividad diferencial

Conclusiones - III Requerimientos: Familiaridad con los estándares web: Lenguajes de marcado (XML, XHTML)‏ Formatos de presentación (XSL, CSS)‏ Metadatos Validación Uso de tecnologías adecuadas: Producen código fuente sin errores Analizan el código fuente Separan contenido de presentación Políticas de control de calidad: Libros de estilo Auditorias y evaluación

Fuentes: Selección básica John Allsopp . Microformats: Empowering your markup for Web 2.0. Berkeley: Friendsof, 2007 Rachel Andrew & Dan Shafer. HTML Utopia: Designing without tables using CSS. Collingwood: Sitepoint, 2006 Andy Budd. CSS Mastery: Advanced Web Standarsd Solutions . Berkeley: Friendsof, 2006 Nigel Chapman; Jenny Chapman . Web Design: A complete introduction. Chichester: Wiley, 2006 Paul Haine. HTML Mastery: Semantics, Standars, and Styling. Berkeley: Friendsof, 2006. Rob Huddleston . XML . Hoboken: Wiley, 2007 Shirley Kaiswer. Deliver First Class Web Sites: 101 Essential checklists . Collingwood: Sitepoint, 2006 Abdrew Kirkpatrick . Web Accessibility: Web Standards and Regulatory Compliance . Berkeley: Friendsof, 2006 Jesús Tramullas (coord.). Tendencias en documentación digital . Gijón: Trea, 2006 Ed Tittel et al. Mastering XHTML. San Francisco: Sybex, 2002. Christopher Walton . Agency and the Semantic Web . New York: Oxford, 2007 Jeffrey Zeldman . Designing with web standards (second edition). Berkeley: New Riders, 2007

Sitios web significativos The Web Standard Project http :// www.webstandards.org / A List Apart http :// www.alistapart.com / CSS Zen Garden http :// www.csszengarden.com / Microformats http :// microformats.org /

Práctica 1 En esta práctica nos familiarizaremos con algunas herramientas para la edición de metadatos. EDITOR DE METADATOS DigiDocMeta: extracción automática de metadatos http://www.observaweb.upf.edu/digidocmeta/digidocmetaeditor.pl?idi=es EDITORES DE MICROFORMATOS a. Creación de una tarjeta de presentación - hCard: http://microformats.org/code/hcard/creator b. Creación de un evento en un calendario - hCalendar: http://microformats.org/code/hcalendar/creator c. Relaciones personales - XFN: http://gmpg.org/xfn/creator-es

Práctica 2 Práctica 2: Presencia de las palabras clave en nuestro código fuente Escoja un dominio que le sea familiar Seleccione una palabra clave de este dominio Compruebe que la palabra clave aparece en el dominio utilizando un buscador (Yahoo!). Para ello realice la consulta: site:dominio palabraClave A continuación visualice el código fuente y utilice la herramienta "buscar" del menú "Edición" para encontrar los lugares en los que aparece nuestra palabra clave ¿Se están siguiendo las recomendaciones y pautas más apropiadas en la codificación de las páginas de su dominio? Este proceso se puede hacer automáticamente con herramientas como: http://www.keyworddensity.com/

2009 09 21 Optimizacioncodigofuente V1

Más contenido relacionado

Similar a 2009 09 21 Optimizacioncodigofuente V1 (20)

2009 09 21 Optimizacioncodigofuente V1