Gua SEO Webmaster

A continuacin listo algunas recomendaciones a seguir para el desarrollo y optimacin de

pginas Web con CSS, DIVS, XHTML, Java Script La recopilacin es un resumen de
diferentes temas que existen en la nube y los reun para facilitar la vida y aprendizaje,
espero poco a poco seguir incrementando la lista. Es una lectura obligada para todo novato
de webmaster.

Cmo etiquetar y posicionar un archivo PDF

Enumeremos algunas pautas que nos aclaren como estructurar y colocar las etiquetas en el
PDF:

El ttulo vendr determinado por la estructura jerrquica del contenido, el nombre

del archivo o el que le asignemos en las Propiedades del documento PDF y la
estructura jerrquica del contenido que se haya creado en la aplicacin de donde
provenga el PDF (Word, editor HTML, Excel, etc.)
Asignemos ttulo, autor, asunto y palabras clave en el propio PDF (botn secundario
ratn y Probidades del documento) donde la etiqueta del ttulo como siempre ser
la ms importante
Nombre del archivo que se corresponda con el ttulo del mismo separando las
palabras con guiones (al estilo de las URLs de pginas dinmicas)

Tambin podemos asignar las propiedades del documento antes de crear el PDF. Por
ejemplo desde Word en su versin de Office 2007 se hace desde: Preparar-Propiedades.
http://www.consultorweb.es/como-etiquetar-posicionar-archivo-pdf/46/

Site map obligatorio para un sitio Web

Un site map (o sitemap) es un archivo XML que lista las pginas en un sitio Web,
organizadas comnmente de forma jerrquica. Esto ayuda a los visitantes y a los motores
de
bsqueda
a
hallar
las
pginas
en
un
sitio.
El Protocolo Sitemap le permite informar a los motores de bsqueda acerca de qu URL de
sus sitios Web se pueden rastrear. En su forma ms simple, un Sitemap que utiliza el
Protocolo Sitemap es un archivo XML que enumera las URL de un sitio. Por Google.
https://www.google.com/webmasters/tools/docs/es/protocol.html
https://www.google.com/webmasters/tools/docs/en/sitemap-generator.html

Validar la inclusin de cdigo JavaScript que estn en la pgina HTML:

1.
2.
3.
4.
5.

<script type="text/javascript" src="../archivo.js>

<!-// tu cdigo
-->
</script>

La forma aterior era:

6.

<script language="javascript" type="text/javascript"

src="../archivo.js>
7.
<!-8.
// tu cdigo
9.
-->
10. </script>

Validar cdigo JavaScript Online

http://www.javascriptlint.com/online_lint.php

Minimize HTTP Requests

CSS Sprites are the preferred method for reducing the number of image requests. Combine
your background images into a single image and use the CSS background-image and
background-position properties to display the desired image segment.
Los CSS Sprites es una sencilla y efectiva tcnica de CSS que nos permite ahorrar ancho de
banda.
Image maps combine multiple images into a single image. The overall size is about the
same, but reducing the number of HTTP requests speeds up the page. Image maps only
work if the images are contiguous in the page, such as a navigation bar. Defining the
coordinates of image maps can be tedious and error prone. Using image maps for
navigation is not accessible too, so it's not recommended.

11. .sprite-icoescritorio-A { background-position: 0 -30px; }

12. /*No olvides aadir una regla de color de fondo para referenciar a
la imagen del Sprite. Algo como por ejemplo:*/
13. li {
14.
background: url(csg-49b1a7c247de4.gif) no-repeat top left;
15.
list-style:none;
16.
text-indent:20px;
17. }
18.

Usa el menor nmero de archivos posible. Es mejor un slo archivo de 30Kb que 3 archivos
de 10Kb.
Piensa que para cada uno de los archivos estticos enlazados desde un documento HTML (
CSS, Javascript, imgenes, etc... ), ste debe realizar una conexin HTTP y lanzar una
peticin, con sus correspondientes cabeceras, cookies si las hubiere... todo suma y al final,
tanto en tamao como en tiempo de descarga, penalizars al usuario
http://www.csssprites.com/
http://spritegen.website-performance.org/

Avoid Redirects
Redirects are accomplished using the 301 and 302 status codes. Here's an example of the
HTTP headers in a 301 response:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
The browser automatically takes the user to the URL specified in the Location field. All the
information necessary for a redirect is in the headers. The body of the response is typically
empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless
additional headers, such as Expires or Cache-Control, indicate it should be. The Meta
refresh tag and JavaScript are other ways to direct users to a different URL, but if you must
do a redirect, the preferred technique is to use the standard 3xx HTTP status codes,
primarily to ensure the back button works correctly.

Minimize the Number of iframes

Iframes allow an HTML document to be inserted in the parent document. It's important to
understand how iframes work so they can be used effectively.
<iframe> pros:

Helps with slow third-party content like badges and ads

Security sandbox
Download scripts in parallel

<iframe> cons:

Costly even if blank

Blocks page onload
Non-semantic

No 404s
HTTP requests are expensive so making an HTTP request and getting a useless response (i.e.
404 Not Found) is totally unnecessary and will slow down the user experience without any
benefit.
http://developer.yahoo.com/performance/rules.html

Etiquetas META para mejor el posicionamiento

Meta Name "Keywords"

En esta Tag pondremos las palabras por las cuales, queremos que nuestro sitio sea
encontrado por los robots de bsqueda, separada por comas. No ser conveniente

utilizar palabras repetidas en este apartado, ya que muchos robots de indexacin de

pginas las rechazan. Tampoco es conveniente hacer una lista de trminos
demasiado larga, normalmente con 20 o 30 palabras es ms que suficiente.
19. <meta name="keywords" content="universidad, veracruzana, veracruz,
xalapa, uv, darwin, especies, evolucin, seleccin natural, natural,
origen, especies, cerebro, mundial, semana, semana mundial" />

Meta name "Description"

En esta Tag deberemos poner la descripcin de nuestra pgina, y ser por la cual
ser indexado nuestro sitio por los robots de los buscadores, confeccionaremos, por
tanto, una frase de extensin no muy larga y que describa a la perfeccin nuestro
sitio. Si no incluimos esta etiqueta, los buscadores pueden presentar nuestra pgina
simplemente por el ttulo del sitio, o tomando esa cadena de 256 caracteres como
los que aparecen en nuestra pgina ndice, mostrndose al usuario. Al igual que en
la etiqueta Keywords, no es conveniente repetir palabras, ya que muchos robots,
penalizan
el
spam.

Por otro lado, si que es conveniente, que en esta cadena de descripcin de nuestro
sitio, aparezcan palabras que anteriormente colocamos en la etiqueta Keywords.

20. <meta name="description" content="descripcion de la pagina" />

Utilizar cabeceras DOCTYPE

Segn el W3C (y WDG) los ficheros HTML (pginas Web normales) deben tener una serie de
"cabeceras" o identificadores de la versin que se utiliza. Aunque esto no es estrictamente
necesario, la W3C lo recomienda para que se siga la "norma".

21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Este es el encabezado que deberan llevar todos los documentos XHTML1.0 estrctos
acordes a las especificaciones de la W3C. Es un aviso para que el agente de usuario sepa
que tipo de documento va a interpretar. Para ser ms especficos diremos que al ser un
documento de tipo strict.dtd, los elementos utilizados sern slo los includos en el lenguaje
XHTML 1.0.

Crea ttulos de pgina nicos y precisos

<title> Es la clave del xito del SEO
Un buen title es la clave del xito del SEO y un buen posicionamiento en los buscadores. El
Tag Title es el que hace referencia al ttulo de tu pgina Web y se despliega en la barra de
ttulo de tu navegador.

Como les deca anteriormente, prestemos mucha atencin a este tag, yo tengo algunos
pasos y trucos que utilizo cuando hago los ttulos.

Densidad: La densidad de palabras en el titulo es algo muy importante, no hagas

ttulos muy largos, trata de hacer un resumen de palabras.
Keywords: Esto es muy importante!! Coloca tus keywords en el tag title. No repitas
demasiado las palabras claves en el tag title porque podras recibir una sancin.
Crea
etiquetas
title
nicas
para
cada
pgina.
Lo ideal es que cada una de tus pginas tenga una etiqueta title nica, que ayude a
Google
a
distinguir
esa
pgina
del
resto
de
pginas de tu sitio.

http://www.chicaseo.com/optimizacin-seo-tag-title-en-wordpress/
http://www.oscatalogo.com/guia-de-optimizacion-para-motores-de-busqueda-seo/

Mejora la estructura de las URL

Para mejorar el indexado de todas las pginas del sitio es recomendable utilizar URLs que en
vez
de
contener
datos
y
nmeros
pocos
legibles
como
http://www.dominio.com/carpeta1/15798436/x1/00004564.html , contengan palabras
relevantes
que
describan
la
pagina
del
sitio
como
http://www.dominio.com/articulos/articulos-mas-buscados.html
Con palabras descriptivas que hagan referencia al tema de la pagina.
Utiliza palabras en las URL. Utilizando categoras y nombres de archivo descriptivos
facilita el rastreo del las paginas de su sitio a los motores de bsqueda.
Procure utilizar signos de puntuacin en sus URL. Una URL como
http://www.example.com/vestido-verde.html es mucho ms prctica que una
como http://www.example.com/vestidoverde.html. Le recomendamos el uso de
guiones normales (-) en lugar de guiones bajos (_) en las URL.
Crea una estructura de directorios simple.
http://www.oscatalogo.com/guia-de-optimizacion-para-motores-de-busqueda-seo/
http://www.google.com/support/webmasters/bin/answer.py?answer=76329&hl=es

Optimiza el uso de las imgenes:

Todas las imgenes pueden tener un nombre de archivo definido y un atributo alt, de los
cuales podemos aprovecharnos. Usando los Atributos ALT y TITLE Para Mayor Accesibilidad
El atributo alt te permite especificar un texto alternativo a la imagen, si este no puede
mostrarse por la razn que sea o est utilizando tecnologas alternativas, como un lector de
pantalla, el contenido del atributo alt ofrecer informacin sobre la imagen.

Es una etiqueta OBLIGATORIA en las imgenes

Tambin funciona como tooltip en Internet Explorer.

22. <img src="http://www.uv.mx/images/logo.jpg" alt="Universidad

Veracruzana" />

El atributo TITLE - Se puede utilizar tanto en imgenes como en enlaces, y es la encargada

de ofrecer una descripcin emergente (tooltip) de la imagen o enlace. Funciona en todos los
navegadores. Puede complementar al ALT.
http://www.adseok.com/tips-seo/google-prefiere-las-etiquetas-alt-para-las-imagenes/
http://googlewebmastercentral.blogspot.com/2007/12/using-alt-attributes-smartly.html

Alto mnimos para IE6 (y el resto)

IE6 no soporta esta propiedad tan til (como tantas otras). La solucin: un simple truco de
CSS que involucra !important y cmo IE6 no lo interpreta como debera.
23. ul#menu {
height: auto!important; /* para los browsers buenos */
height: 175px; /* para IE5+ */
min-height: 175px; /* para los browsers buenos */
}

La primera declaracin (height: auto!important) no lo leer IE5+ ya que no soporta

!important, as que deja de leer esta lnea y pasa a la segunda: height: 175px. Los otros
browsers pasan en seguida a leer la tercera: min-height: 175px e IE5+ no lo interpretar, lo
que har que todos queden felices y contentos con su alto mnimo funcionando.
http://www.csslab.cl/2007/10/05/alto-minimos-para-ie6-y-el-resto-claro/

Hasta siempre, clear:both

Cuando tratamos de maquetar nuestras pginas con CSS mediante elementos flotantes, no
tarda en aparecer un elemento contenedor, que no rodea a los elementos contenidos, y
esto resulta un verdadero inconveniente, ya que a menudo deseamos que los elementos
con hijos flotantes, se comporten como dios manda y rodeen por completo a sus hijos.
24.
25.
26.

clear{
clear:both;
}

Esta tcnica es poco elegante, ensucia nuestro marcado HTML con un elemento ajeno al
contenido, e incluye un elemento "vaco" pero funciona.

La solucin definitiva
La propiedad overflow permite controlar el desbordamiento de los elementos contenidos, y
admite cuatro valores, auto, visible, scroll y hidden.
El valor por defecto es visible, que hace la caja contenedora crezca para adaptarse al
tamao de sus hijos. El resto de valores mantienen las dimensiones especificadas con width
y height, pero nos permiten controlar el comportamiento de las barras de desplazamiento,

mostrndolas siempre (scroll), ocultndolas siempre (hidden) o mostrndolas solo cuando

sea necesario (auto)
Pues resultan todos los valores posibles, menos visible asumen que se han especificado
unas dimensiones, y si no es as... obliga a que se calculen!!
Con overflow le recordamos a una caja que tiene hijos, flotantes, pero hijos.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

div.container {
border: 1px solid #000;
overflow: hidden; /*Para IE bajo MAC y todos*/
width:100%; /*es obligatorio establecer el ancho*/
}
/*DIV sin ningn float y que se adapte al alto */
div.pie {
border: 1px solid #000;
overflow: hidden; /*Para IE bajo MAC y todos*/
width:100%; /*es obligatorio establecer el ancho*/
clear:both;
}

http://www.planseldon.com/blog/hasta-siempre-clearboth/
http://www.quirksmode.org/css/clearing.html

Conditional comments
Conditional comments only work in Explorer on Windows, and are thus excellently suited to
give special instructions meant only for Explorer on Windows. They are supported from
Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
Conditional comments work as follows:
41. <p><!--[if IE]>
42. According to the conditional comment this is Internet Explorer<br
/>
43. <![endif]-->
44. <!--[if IE 5]>
45. According to the conditional comment this is Internet Explorer 5<br
/>
46. <![endif]-->
47. <!--[if IE 7]>
48. According to the conditional comment this is Internet Explorer 7<br
/>
49. <![endif]--></p>

Para optimizar definiciones de cdigo CSS:

1) Mejorar la definicin de las proporciones en la definicin de medidas con 0px:
50. padding:0 5px 0 5px; Optimizado
51. padding:0px 5px 0px 5px; No optimizado
52.
53. margin:0 5px 0 5px; Optimizado
54. margin:0px 5px 0px 5px; No optimizado

2) Mejorar el escalado y resampleado de las imgenes en Internet Explorer

En IE 7 la propiedad de escalado por el mtodo bicubic est desactivada y debemos
activarla por CSS:
55. img {
56.
-ms-interpolation-mode: bicubic;
57. }

http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
http://samples.msdn.microsoft.com/workshop/samples/author/css/msInterpolation.htm

Maquetacin CSS a dos, tres o ms columnas

A dos Columnas
Mtodo 1
Debe existir una capa contenedora y establecer en esta dos DIV con float: left; y otra con
float: right;
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

div.container {
border: 1px solid #000;
overflow:hidden;
width:100%;
}
div.left {
width: 45%;
float: left; /*flotando izquierda*/
border:1px #000 solid;
}
div.right {
width: 45%;
float: right; /*flotando derecha*/
border:1px #000 solid;
}

Mtodo 2
Debe existir una capa contenedora y la novedad es establecer todos los divs (Columnas) con
float: left;
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.

div.container {
border: 1px solid #000;
overflow:hidden;
width:100%;
}
div.columna1 {
width: 30%;
float: left; /*a la izquierda*/
border:1px #000 solid;
}
div.columna2 {
width: 40%;
float: left; /*a la izquierda*/
border:1px #000 solid;

91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.

}
div.columna3 {
width: 30%;
float: left; /*a la izquierda*/
border:1px #000 solid;
}
/*Ms columnas N */
div.columna4 {
width: 10%;
float: left; /*a la izquierda*/
border:1px #000 solid;
}

Alineacin Vertical de un DIV para todos los Navegadores

Centrar texto verticalmente con CSS
Puede lograrse estableciendo dentro del CSS el alto de lnea del texto igual al alto total de
la div. As, el texto ubicado dentro de la div se centrar verticalmente en ella. El nico
problema surge cuando el texto tiene ms de una lnea, donde se desfasara todo. Si este es
tu caso prueba con introducir un corte de lnea </br> en vez de cerrar y abrir un nuevo
prrafo.
Entonces, para centrar la div deberamos tener lo siguiente en el CSS:
103. #texto-centrado{
height: 150px; /* alto de la div */
line-height: 150px; /* esto es lo que centra el texto verticalmente
*/
104. }

http://www.studiomate.com.ar/blog/css/centrar-texto-verticalmente-con-css

Alineacin bottom
CSS 2 no soporta alineacin vertical, as que para alinear verticalmente un contenido de una
capa tenemos que utilizar tcnicas o trucos alternativos.
105. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
106. <html xmlns="http://www.w3.org/1999/xhtml">
107. <head>
108. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
109. <title>Alineacin bottom</title>
110. <style type="text/css">
111. #contenedor {
112.
width: 200px;
113.
height: 200px;
114.
position: relative;
115.
border:1px #000 solid;/*solo para destacar el ejemplo*/
116. }
117. #vertical {
118.
bottom: 0pt;
119.
position: absolute;
120.
width:200px;
121.
color:#ff0000;
122. }

123.
</style>
124. </head>
125. <body>
126. <div id="contenedor">
127.
<div id="vertical">
128.
Mira mam estoy en la base del div y me veo de perlas
todos los navegadores
129.
</div>
130. </div>
131. </body>
132. </html>

en

No es aconsejable usar los guiones bajos para identificadores y clases

Una pequea puntualizacin, no es nada aconsejable usar los guiones bajos para
identificadores y clases (en cambio no hay problemas con los guiones medios), no lo
reconocen algunos navegadores (como el Netscape 4).
En CSS2, los identificadores (incluyendo los nombres de los elementos, clases e ID de los
selectores) pueden contener slo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en
ISO 10646, ms el guin (-); no pueden comenzar con un guin o un nmero.

133.
134.
135.
136.
137.
138.
139.

texto_rojo { /*Incorrecto*/
color :#ff0000 ;
}
texto-rojo { /* Correcto y recomendado por CSS2*/
color :#ff0000 ;
}

http://www.pixelovers.com/css-consejos-buenas-practicas-11635
http://www.sidar.org/recur/desdi/traduc/es/css/syndata.html#q4

Resetea las propiedades CSS para eliminar diferencias entre navegadores

desde el principio.
Es muy buena idea empezar tu hoja de estilos general con una serie de declaraciones que
reseteen propiedades como los margin, los padding y los border de los elementos ms
comunes. Echa un vistazo al reset.css que ofrece la librera de Yahoo o al artculo de Daniel
que lo comenta ms a fondo.
YUI Reset CSS, desarrollado por Yahoo, que normaliza el renderizado por defecto de los
elementos HTML.
http://www.torresburriel.com/weblog/2007/03/11/reset-css-o-como-empezar-de-nuevomanejando-estilos/

Css y las tablas

Caption en html
Mediante las etiquetas <caption></caption> podemos especificar el ttulo de la tabla.
Admite un atributo, align="", con dos valores, "top" y "bottom", segun queramos que el
ttulo se visualice como una linea de texto encima o debajo de la tabla:
Caption con CSS

<caption style="caption-side: bottom;">texto visible aqui</caption>

border-collapse
<table border="3" style="border-collapse: collapse;">
Esta propiedad determina como deben mostrarse los bordes de elementos contiguos de las
tablas.
Admite dos valores: collapse y separate.
border-collapse:collapse indica que los bordes contiguos se solapan, mostrando uno solo.
border-collapse:separate muestra los dos bordes contiguos.

a
d

border-collapse:collapse
b
c
e
f
border-collapse:separate

http://www.ignside.net/man/css/tablas.php

Web Tools for Quality, Accessibility, Standards Compliance:

http://valet.htmlhelp.com/

http://jigsaw.w3.org/css-validator/ W3C

http://validator.w3.org/check : W3C

http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en CSS Formatter and

Optimiser. Limpieza automtica de cdigo sucio.

http://cssdrive.com/index.php/main/csscompressor/ Comprime tu CSS para

incrementar la velocidad de carga de tu sitio Web.

http://www.sidar.org/hera/ : HERA es una utilidad para revisar la accesibilidad de las pginas

Web de acuerdo con las recomendaciones de las Directrices de Accesibilidad para el Contenido Web
1.0 (WCAG 1.0).

http://www.guiaweb.gob.cl/ Gua Web 2.0

Jos Luis Simn Romano

Departamento de Desarrollo de Software Acadmico
Direccin de Desarrollo Informtico de Apoyo Acadmico
Universidad Veracruzana
lusimon@uv.mx