2009 09 21 Optimizacioncodigofuente V1

Jornada “Marketing en buscadores en el mundo digital”

Rafael Pedraza JiménezDepartament de Comunicació

Universitat Pompeu [email protected]

Taller “Search Engine Optimization”

Optimización del código fuente

Taller SEO: El código fuente 221/09/2009

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 CSShttp://www.codehelp.co.uk/html/deprecated.html


Atributos depreciados

align alink background bgcolor clear compact color border hspace Link name

Alternativas: CSS for deprecated attributeshttp://www.punkchip.com/2007/02/css-deprecated-attributes-1/

noshadenowrapsizestarttexttypevaluevlinkwidthvspace


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:

1. Uso de metadatos. Ejemplos: Elementos: title, meta, DC, … Atributos: id, alt, cite, class, name, rel, rev, summary, …

Metadatos vinculados: RDF

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

hn 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:[email protected]">[email protected]</a></div>

Rafael Pedraza Universitat Pompeu [email protected]


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 Projecthttp://www.webstandards.org/

A List Aparthttp://www.alistapart.com/

CSS Zen Gardenhttp://www.csszengarden.com/

Microformatshttp://microformats.org/


Práctica 1En esta práctica nos familiarizaremos con algunas herramientas para la edición de metadatos.

EDITOR DE METADATOS

DigiDocMeta: extracción automática de metadatoshttp://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 2Práctica 2: Presencia de las palabras clave en nuestro código fuente

1. Escoja un dominio que le sea familiar

1. Seleccione una palabra clave de este dominio

1. Compruebe que la palabra clave aparece en el dominio utilizando un buscador (Yahoo!). Para ello realice la consulta:

site:dominio palabraClave

1. 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/

Documents

2009 09 21 Optimizacioncodigofuente V1