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]
© Copyright 2024