1. Internet

Guía SEO Webmaster
A continuación listo algunas recomendaciones a seguir para el desarrollo y optimación de
páginas Web con CSS, DIVS, XHTML, Java Script… La recopilación 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.
Cómo etiquetar y posicionar un archivo PDF
Enumeremos algunas pautas que nos aclaren como estructurar y colocar las etiquetas en el
PDF:
•
•
•
El título vendrá determinado por la estructura jerárquica del contenido, el nombre
del archivo o el que le asignemos en las Propiedades del documento PDF y la
estructura jerárquica del contenido que se haya creado en la aplicación de donde
provenga el PDF (Word, editor HTML, Excel, etc.)
Asignemos título, autor, asunto y palabras clave en el propio PDF (botón secundario
ratón y Probidades del documento) donde la etiqueta del título como siempre será
la más importante
Nombre del archivo que se corresponda con el título del mismo separando las
palabras con guiones (al estilo de las URL’s de páginas dinámicas)
También podemos asignar las propiedades del documento antes de crear el PDF. Por
ejemplo desde Word en su versión 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 páginas en un sitio Web,
organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los motores
de
búsqueda
a
hallar
las
páginas
en
un
sitio.
“El Protocolo Sitemap le permite informar a los motores de búsqueda acerca de qué URL de
sus sitios Web se pueden rastrear. En su forma más 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 inclusión de código JavaScript que están en la página HTML:
1.
2.
3.
4.
5.
<script type="text/javascript" src="../archivo.js”>
<!-// tu código
-->
</script>
La forma aterior era:
6.
<script language="javascript" type="text/javascript"
src="../archivo.js”>
7.
<!-8.
// tu código
9.
-->
10. </script>
Validar código 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 técnica 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 añadir 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 número de archivos posible. Es mejor un sólo archivo de 30Kb que 3 archivos
de 10Kb.
Piensa que para cada uno de los archivos estáticos enlazados desde un documento HTML (
CSS, Javascript, imágenes, etc... ), éste debe realizar una conexión HTTP y lanzar una
petición, con sus correspondientes cabeceras, cookies si las hubiere... todo suma y al final,
tanto en tamaño como en tiempo de descarga, penalizarás 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 búsqueda, separada por comas. No será conveniente
utilizar palabras repetidas en este apartado, ya que muchos robots de indexación de
páginas las rechazan. Tampoco es conveniente hacer una lista de términos
demasiado larga, normalmente con 20 o 30 palabras es más que suficiente.
19. <meta name="keywords" content="universidad, veracruzana, veracruz,
xalapa, uv, darwin, especies, evolución, selección natural, natural,
origen, especies, cerebro, mundial, semana, semana mundial" />
Meta name "Description"
•
En esta Tag deberemos poner la descripción de nuestra página, y será por la cual
será indexado nuestro sitio por los robots de los buscadores, confeccionaremos, por
tanto, una frase de extensión no muy larga y que describa a la perfección nuestro
sitio. Si no incluimos esta etiqueta, los buscadores pueden presentar nuestra página
simplemente por el título del sitio, o tomando esa cadena de 256 caracteres como
los que aparecen en nuestra página índice, mostrándose 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 descripción de nuestro
sitio, aparezcan palabras que anteriormente colocamos en la etiqueta Keywords.
20. <meta name="description" content="descripcion de la pagina" />
Utilizar cabeceras DOCTYPE
Según el W3C (y WDG) los ficheros HTML (páginas Web normales) deben tener una serie de
"cabeceras" o identificadores de la versión 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 deberían llevar todos los documentos XHTML1.0 estríctos
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 más específicos diremos que al ser un
documento de tipo strict.dtd, los elementos utilizados serán sólo los incluídos en el lenguaje
XHTML 1.0.
Crea títulos de página ú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 título de tu página Web y se despliega en la barra de
título de tu navegador.
Como les decía anteriormente, prestemos mucha atención a este tag, yo tengo algunos
pasos y trucos que utilizo cuando hago los títulos.
•
•
•
Densidad: La densidad de palabras en el titulo es algo muy importante, no hagas
títulos 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 podrías recibir una sanción.
Crea
etiquetas
title
únicas
para
cada
página.
Lo ideal es que cada una de tus páginas tenga una etiqueta title única, que ayude a
Google
a
distinguir
esa
página
del
resto
de
páginas 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 páginas del sitio es recomendable utilizar URLs que en
vez
de
contener
datos
y
números
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 categorías y nombres de archivo descriptivos
facilita el rastreo del las paginas de su sitio a los motores de búsqueda.
• Procure utilizar signos de puntuación en sus URL. Una URL como
http://www.example.com/vestido-verde.html es mucho más práctica 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 imágenes:
Todas las imágenes 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 razón que sea o está utilizando tecnologías alternativas, como un lector de
pantalla, el contenido del atributo “alt” ofrecerá información sobre la imagen.
•
•
Es una etiqueta OBLIGATORIA en las imágenes
También 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 imágenes como en enlaces, y es la encargada
de ofrecer una descripción 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 mínimos para IE6 (y el resto)
IE6 no soporta esta propiedad tan útil (como tantas otras). La solución: un simple truco de
CSS que involucra !important y cómo IE6 no lo interpreta como debería.
23. ul#menu {
height: auto!important; /* para los browsers buenos */
height: 175px; /* para IE5+ */
min-height: 175px; /* para los browsers buenos */
}
La primera declaración (height: auto!important) no lo leerá IE5+ ya que no soporta
!important, así que deja de leer esta línea 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 mínimo 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 páginas 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 técnica es poco elegante, ensucia nuestro marcado HTML con un elemento ajeno al
contenido, e incluye un elemento "vacío" pero funciona.
La solución 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
tamaño 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,
mostrándolas siempre (scroll), ocultándolas siempre (hidden) o mostrándolas 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 ningún 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 código CSS:
1) Mejorar la definición de las proporciones en la definición 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 imágenes en Internet Explorer
En IE 7 la propiedad de escalado por el método 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
Maquetación CSS a dos, tres o más columnas
A dos Columnas
Método 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;
}
Método 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;
}
/*Más columnas N */
div.columna4 {
width: 10%;
float: left; /*a la izquierda*/
border:1px #000 solid;
}
Alineación Vertical de un DIV para todos los Navegadores
Centrar texto verticalmente con CSS
Puede lograrse estableciendo dentro del CSS el alto de línea 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 más de una línea, donde se desfasaría todo. Si este es
tu caso prueba con introducir un corte de línea </br> en vez de cerrar y abrir un nuevo
párrafo.
Entonces, para centrar la div deberíamos 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
Alineación bottom
CSS 2 no soporta alineación vertical, así que para alinear verticalmente un contenido de una
capa tenemos que utilizar técnicas 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>Alineación 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 pequeña puntualización, 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 sólo caracteres [A-Za-z0-9] y los caracteres 161 en adelante en
ISO 10646, más el guión (-); no pueden comenzar con un guión o un número.”
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 más
comunes. Echa un vistazo al reset.css que ofrece la librería de Yahoo o al artículo de Daniel
que lo comenta más 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 título de la tabla.
Admite un atributo, align="", con dos valores, "top" y "bottom", segun queramos que el
título 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
a
b
c
d
e
f
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 automática de código 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 páginas
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/ Guía Web 2.0
José Luis Simón Romano
Departamento de Desarrollo de Software Académico
Dirección de Desarrollo Informático de Apoyo Académico
Universidad Veracruzana
[email protected]