Que son Las Meta Tags y Como se Usan

Las meta tags son identificadores ocultos, es decir instrucciones especiales del lenguaje HTML que no son mostradas directamente en el navegador, pero que gracias a la información que contienen de nuestra página web, nos ayudan a mejorar nuestra posición en el listado de los resultados de los mayores buscadores (altavista, excite, lycos….).

El funcionamiento de las Meta Tags en los motores de búsqueda es simple, y lo podemos resumir en 3 puntos:

  1. Añadimos nuestra página en el motor de búsqueda, facilitando la dirección de la misma y nuestro e-mail a los buscadores. Normalmente cada motor tiene un apartado para poder añadir nuestro sitio web, se suelen identificar por “add url”, “submit a site” ,”añadir url”,”sugerir sitio”,etc. Mas adelante damos la dirección de algunos páginas web donde podrás registrar tu URL en varios motores a la vez, facilitándote el trabajo de alta de tu sitio web.
  2. El motor de búsqueda navegará por tu sitio web, e incluirá en su índice la información que encuentre en las Meta Tags de tu página, tales como descripción, palabras clave, titulo, autor y muchos mas datos que ayudarán a un buen indexado de nuestra página en los motores de búsqueda .
  3. El usuario introduce en un buscador el tema en el cual esta interesado, mediante palabras clave. Seguidamente el motor de búsqueda revisará en sus archivos todas aquellas páginas que contengan (en las Meta Tags) las palabras clave que ha introducido el usuario, ofreciéndole una lista de todas las páginas que contengan esas palabras clave, y aquí es donde interviene el tener unas buenas Meta Tags, para que una de las páginas que se muestran al usuario sea la nuestra.

Aunque hay algunos buscadores que no utilizan todas las Meta tags, es recomendable incluirlas, para realizar una correcta promoción de nuestra web en los motores de busqueda que si lo hacen.

Las Meta Tags se deben de colocar en la cabecera de la página web, entre y . Normalmente cuando queremos promocionar nuestro sitio web, este consta de una página principal, que se nombra como index.htm o default.htm, en el cual debemos de introducir las Meta Tags para que sean efectivas (en caso de que trabajemos con marcos Irán en la página donde se configuran estos).

Existen dos tipos de Meta Tags, con distintas funciones:

  1. LAS META NAMES
  2. LAS HTTP-EQUIV


LAS META NAMESLos Meta Names se utilizan para optimizar el resultado en los motores de búsqueda. Contienen información referida al documento HTML pero no se presenta en la pantalla del navegador.

Los Meta Names se utilizan para optimizar el resultado en los motores de búsqueda. Contienen información referida al documento HTML pero no se presenta en la pantalla del navegador.

  • Meta name TITLE
    Es la principal etiqueta para los buscadores, que proporciona el titulo de nuestro sitio web. Es importante que se corresponda con el contenido de la etiqueta , que tenemos en nuestra página web.
    El titulo debe de ser una frase breve que resuma bien el tema de nuestra página, debe incluir las palabras clave mas importantes de su sitio, tales como el nombre de su empresa, si fuera el caso.
    No escriba todo el texto en mayúsculas y acentué normalmente. Evite palabras como “bienvenido”,”sitio”,”web”.
    <META NAME=”title” CONTENT=”título del sitio”>
  • Meta name DESCRIPTION
    En esta tag es donde pondremos la descripción de nuestra página, que será la frase que acompañará al titulo anterior en los listados de los buscadores. No es conveniente repetir palabras en ella, pero si lo es, utilizar alguna de las palabras clave que utilizaremos en el campo keywords. No escriba todo el texto en mayúsculas y acentúe normalmente. Utilicé una frase de extensión no muy larga y que describa a la perfección nuestro sitio. Si desea asegurarse que los buscadores muestren la mayor parte de su descripción no sobrepase los 120 y 140 caracteres en la longitud de la frase.
    <META NAME=”description” CONTENT=”descripción dela página”>
  • Meta name KEYWORDS
    En esta tag pondremos las palabras exactas por las cuales queremos que nuestro sitio sea encontrado por los robots de búsqueda. Las palabras pueden estar separadas por espacios, por comas o por ambos a la vez. No es conveniente repetir palabras, ya que muchos robots de indexación las rechazan. Incluya solo las palabras mas importantes para la página, acentuadas normalmente, y utilizando mayúsculas solo cuando es necesario. No es conveniente hacer una lista de palabras demasiado larga, entre 10 y 20, será mas que suficiente.
    <META NAME=”Keywords” CONTENT=”palabra1, palabra2,…. “>
  • Meta Name DC LANGUAGE
    Determina el idioma en el que esta escrita nuestra página web.
    <META NAME=”Language” CONTENT=”Spanish”>
  • Meta Name REVISIT
    Esta Meta tag sirve para configurar la caché del explorador, permitiendo la actualización de la página durante el periodo de tiempo especificado en el identificador.

    <META NAME=”Revisit” CONTENT=”nº days”>

  • Meta Name AUTHOR
    Nos permite colocar el nombre del autor de la página dentro de las Meta Tags.

    <META NAME=”author” CONTENT=”nombre”>

  • Meta Name ROBOTS
    Esta Meta tag dispone de una serie de atributos que nos permite elegir los elementos de la página que no queremos que sean indexados por los motores de búsqueda, tales como los archivos o los vínculos de que dispone la página. Los parámetros de esta Meta son los siguientes:
    all La página será indexada por completo (incluidos archivos).
    none La página será indexada pero sin ningún archivo.
    Index La página puede ser indexada por los robots.
    noindex La página no podrá ser indexada por los robots.
    Follow Permite que los robots sigan los vínculos de nuestra página a otras.
    nofollow No permite que los robots sigan los vínculos de nuestra página a otras.

    <META NAME=”robots” CONTENT=”all | index | follow”>

LAS META HTTP-EQUIV

La etiqueta HTTP-EQUIV, tiene control sobre los exploradores, y son utilizadas para refinar la información y dar instrucciones al explorador que las esta leyendo. Existen varios tipos de META HTTP-EQUIV:

  • Pragma ó cache-control
    Es una manera de controlar la caché del explorador (memoria donde se guardan las páginas que hemos visitado en la red). Esta etiqueta puede tener dos valores: “cache” (utiliza la memoria caché para guardar la página, con lo cual se cargará mas rápido en el ordenador, pero puede ser un punto en contra a la hora de actualizar la página, puesto que los usuarios no verán los nuevos resultados), “no-cache” (no utiliza la caché del explorador para guardar la página).
    <META HTTP-EQUIV=”Pragma” CONTENT=”no-cache/cache”> ( para Netscape)

    <META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache”> (para el Explorer)

  • Expires
    Indica al explorador cuando acaba la vida de una página, limitando el uso de una la misma a una fecha y una hora determinada. Es una Meta útil siempre que el contenido de la web sea perecedero.
    <META HTTP-EQUIV=”expires” CONTENT=”Fri, 20 Feb 2000 10:51:12 GMT”>
  • Refresh
    Especifica el tiempo en segundos que el explorador tardará en mandarte a una segunda dirección URL, una vez que se haya cargado la página que contiene a la Meta tag.
    <META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://www.nuevaurl.es”>
  • Set-Cookie
    Es una de las maneras mas fáciles de introducir una cookie en el explorador del usuario que visita la página. Para que la cookie sea guardada en el disco duro del usuario que visita la web, debe especificarse una fecha de expiración de esta, en caso contrario la cookie se eliminará al acabar la sesión actual.
    <META HTTP-EQUIV=”Set-Cookie” CONTENT=”cookievalue=xxx ;expires=Friday, 15-Feb-01 14:18:41 GMT; path=/”>
  • Window-Target
    Esta Meta especifica el nombre de la ventana en la cual se debe visualizar la pagina web. Es muy útil para evitar que nuestra página sea vista en el marco de otra página web ajena a la nuestra, puesto que con el parámetro _top elimina todos los marcos existentes en el explorador. Puede tener varios parámetros:
    _black La página se visualiza en una ventana del explorador nueva.
    _top La página se visualiza en la ventana completa del explorador, eliminando los marcos que existan en la ventana del explorador.
    _self La página se visualiza en el mismo marco desde el cual se originó el hipervínculo.
    <META HTTP-EQUIV=”Window-target” CONTENT=”_top”>
  • Cuanto Cobra un Programador en Estados Unidos?

    Si tomamos los 10 lenguajes de programación más populares según el índice TIOBE y buscamos en indeed cuál es el salario medio en Estados Unidos para cada lenguaje, obtenemos el siguiente resultado:

    Es decir, entre $60.000 y $80.000 dólares. Incluso teniedo en cuenta lo barato que está el dólar, estaríamos hablado de entre 38.000 € y 50.000 €. Para poder comparar estas cantidades habría tener en cuenta otros factores, como los impuestos (creo que en España se pagan más impuestos que en EEUU) y el coste de la vida (posiblemente gran parte de EEUU sea más barato que España). También habría que ponderar los servicios públicos como la sanidad (cada vez más gente en España recurre a seguros privados) y la educación (cada vez más gente, por lo menos en Madrid, tiene que enviar a sus hijos a colegios privados o concertados). En Venezuela un programador gana un equivalente promedio a 6900 dolares al año, como veran es una miseria de sueldo, es por ello que trabajo de manera independiente antes que estar asalariado y/o exclavizado por algún ente comercial que se enriquezca en base a mi conocimiento.

    Esta es una actualización de los salarios , por las cantidades se mantienen desde el 2012,
    salario-programador

    HTML 5, Cuando sale y que nos trae..

    Todo el que ha intentando incursionar en la internet y ha querido tener su propio sitio web, a tenido que tocar como primer punto, el lenguaje de marcadores HMTL el cual nos permite en pocos minutos tener una web lo suficientemente decente para mostrar y seguir adelante con la siguiente fase que es añadirle estilos mediante CSS y convertirla en una web profesional o seguir mas allá y agregarle funcionabilidades mediante un lenguaje de scripting como PHP y soportar los datos mediante un manejador de BD´s como MySql.

    Ahora bien llevamos varios años usando HTML 4 y el XHTML 1 estricto, pero en los ultimos meses nos hemos visto muy influido por frameworks, API´s,etc. Ahora bien uno de los puntos mas interesantes es el uso extendido que se le esta dando al DOM desde el HTML mediante javascript, este ultimo que desde siempre ha acompañado al famoso lenguaje de marcadores habia sido poco tomado en cuenta asi como el DOM, ya que para añadir dinamismo se usaba poco, asi como el Dhtml, porque el interes de los desarrolladores es de programar mas del lado del servidor , esto puede tener muchos PRO´s , uno de los que me viene a la mente al momento es la seguridad del código, mientras Javascript, Html, CSS puede visualizarse el codigo fuente por el usuario PHP y otros solo muestran una salida estandar.

    Ahora bien, sobre HTML 5, tienen pensado lanzarlo hasta el 2012, aunque ya algunos navegadores poseen algunas de sus caracteristicas, y como decia arriba, tocará ser mas que una nueva version de HTML, pues ademas se vera como una implementación de especificaciones, agregando lo mas nuevo y estable, y quitando lo que esta en desuso.

    Y si bien nos sorprenderia la depuración comentada, lo mas importante es que HTML 5 obstentara convertirse en un proveedor de un API que permitirá a los usuarios crear aplicaciones dentro del navegador que de otra manera estuvieran solo disponibles mediante terceros.

    Algunas de las Caracteristicas Nuevas son:

    • Estructura del cuerpo: La mayoría de las webs tienen un formato común, formado por elementos como cabecera, pie, navegadores, etc. HTML 5 permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página.
    • Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc.
    • Canvas: es un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.
    • Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Es algo así como las Cookies, pero pensadas para almacenar grandes cantidades de información, lo que permitirá la creación de aplicaciones web que funcionen sin necesidad de estar conectados a Internet.
    • Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página. Para ello se dispondrá también de un API para el trabajo con los Web Workers.
    • Aplicaciones web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen también en local y sin estar conectados a Internet.
    • Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización.
    • Nuevas APIs para interfaz de usuario: temas tan utilizados como el “drag & drop” (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API.
    • Fin de las etiquetas de presentación: todas las etiquetas que tienen que ver con la presentación del documento, es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS.

    ¿Cuánto tarda en descargar una página web?

    A cualquier navegante muchas veces le ha pasado lo de ir a descargar una página y esperar, esperar, esperar… En ocasiones se suele tener paciencia para ver el contenido anunciado pero en la mayoría de las ocasiones, pasado un tiempo prudencial, el visitante abandona la página si no se ha producido la descarga. Algunos estudios fijan este tiempo entre los 15 y los 25 segundos.

    En el tiempo de descarga influyen tres factores:

    – El módem y la conexión del navegante. En España hay básicamente dos configuraciones en la mayoría de los ordenadores: módem de 56 Kb y ADSL de 256 Kb. La “b” de “Kb” es la sigla de baudios, es decir unos o ceros por segundo, o lo que es lo mismo, bits por segundo. Como todos sabemos que 8 bits componen un byte, el módem de 56 Kb recibirá 56.000 bits por segundo, es decir, 7.000 bytes o 7 Kilobytes. La conexión ADSL multiplica esas cifras por 5. Ahora bien, esas son cifras brutas de capacidad. A esas cantidades hay que sumarles las capacidades de compresión de datos de los módem y restarles la cantidad de información que se consume en la transferencia como información de control y verificación. Aproximadamente, en condiciones idóneas, un módem puede recibir datos a 10 kilobytes por segundo y una conexión ADSL a 40.
    Esta cantidad se ve sensiblemente reducida, casi a la mitad, por la capacidad de las líneas telefónicas y los propios módems de las operadoras que gestionan el tráfico. No es un secreto para nadie que en las horas punta, de 6 a 9 de la tarde, la navegación es más espesa y las páginas descargan más lentamente.

    – La capacidad del servidor de páginas web. Aunque todas las empresas de alojamiento de páginas web anuncian que sus servidores son rápidos y que están preparados para soportar todo el tráfico acceda a ellos, la realidad es que para obtener rendimiento económico de sus equipos, estas empresas de hosting sobrecargan cada servidor con docenas y a veces cientos de páginas web de otros tantos usuarios con lo que los servidores se ralentizan en las horas punta. El ejemplo más claro es el de los grandes servidores de hosting gratuito con cientos de miles de páginas que por las tardes suelen ir muchísimo más lentos de lo que sería deseable. Por supuesto, si Ud. se queja a cualquier compañía de hosting de lo lenta que descarga su página sólo obtendrá como respuesta que la lentitud se debe a una mala configuración de su equipo o a la saturación de las líneas de las operadoras.

    – El diseño de la propia página web. Los diseñadores de páginas web suelen pasar por alto este detalle por dos razones: primero, porque ellos acceden a las páginas que están diseñando en modo local, desde su disco duro, a una velocidad de vértigo y, segundo, porque en la mayoría de los casos, al ser profesionales o cuasiprofesionales, disponen de buenas conexiones ADSL o cable que permiten descargar páginas a buena velocidad.
    Los errores que se cometen en el diseño son básicamente tres:

    · recargar demasiado la página con gráficos, animaciones, películas o composiciones en flash o Java o fondos musicales y sonidos. Para medir esto, basta con visitar una página, esperar a que acabe de cargarse y guardar la página completa: Archivo -> Guardar como ->Página completa. Con esto, tendremos el archivo HTML de la página y todos los archivos integrados. Viendo las propiedades de ambos elementos, el archivo HTML y la carpeta, comprobaremos cuánto “pesa” una página. Dividiendo la cantidad de kilobytes que nos dice entre 5 tendremos los segundos que tarda en descargarla un usuario con módem en condiciones normales. Si hacemos esa misma división entre 20, tendremos el mismo dato para los usuarios con ADSL de 256 Kb.

    · no optimizar los gráficos. Cualquier imagen debidamente retocada puede reducir su “peso” a la mitad. Para esto basta con reducir el número de colores en las imágenes .GIF o con reducir la calidad en los .JPG. Esta optimización no se traduce en pérdida de calidad apreciable y nos ahorra unos segundos de descarga que pueden significar que el visitante acabe de descargar la página o se marche a otra web.

    · no definir los tamaños de los elementos que componen la página. Cuando el navegador llega a la página, lo primero que hace es leer el código HTML para determinar la anchura y altura de la presentación que debe mostrar en pantalla al usuario. Si en le página hay una imagen que no tiene su tamaño especificado en el código HTML, el navegador tendrá que esperar a cargar completamente la imagen y verificar su tamaño antes de empezar a mostrar el código de la página. Si esa imagen está dentro de una tabla, toda la tabla aparecerá en la pantalla cuando estén cargados todos y cada uno de los elementos que la componen.

    Como sobre los equipos de los internautas, la velocidad de las conexiones o las capacidades de los servidores es difícil operar, todo webmaster debe centrar sus esfuerzos en optimizar sus páginas… si le interesa recibir visitas. Si es su primera página y quiere poner muchas fotos bien grandes, vídeos muy graciosos, una animación flash que le hizo su primo y una música de fondo en formato .WAV, adelante. Después de todo ¿a quién le pueden interesar unos cientos de visitas diarias más o menos?

    Herramienta de Validación de Xhtml del W3C

    Markup Validation Service es el nombre del servicio web ofrecido de forma libre por la W3C, la organización internacional que establece los estándares de programación web. La validación puede realizarse a partir de la URL de una página web, descargando el fichero desde nuestro ordenador o pegando un trozo del código fuente. Tras el chequeo del código conforme al estándar, recibiremos un listado de las líneas del código HTML, XHTML, SMIL, MathML… que no cumplen con el mismo, junto con una descripción del problema. En algunos errores, podremos encontrar una explicación de la causa que lo provoca y su solución.
    Markup Validation Service es un servicio gratuito al que cualquier interesado puede acceder desde validator.w3.org

    La guía de referencia XHTML

    XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML , que nace precisamente con el objetivo de remplazar a HTML como estándar para las páginas web ante su limitación de uso con las cada vez más abundantes herramientas basadas en XML. XHTML permite incluir otros lenguajes como MathML , SMIL o SVG.

    La guía de referencia XHTML es un documento de consulta rápida en español, sobre una de las tecnologías mas importantes desarrolladas por World Wide Web Consortium (W3C).

    Entre los contenidos ofrecidos por la Guía podemos encontrar:

    -Atributos
    -Módulos

    • Esencial
    • Tabla
    • Formularios
    • Imagen
    • Mapa de Imágenes (Cliente)
    • Mapa de Imágenes (Servidor)
    • Objetos
    • Marcos
    • Objetivos de Apertura
    • Marco en línea (Iframe)
    • Eventos Intrínsecos
    • Metainformación
    • Scripting
    • Hoja de Estilos
    • Enlaces
    • Base
    • Identificación de Nombres

    -Tipos de Atributos
    -Referencias

    Interesados pueden acceder a La guía de referencia XHTML desde www.w3c.es

    Diseño de Temas para WordPress

    He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.

    trescolumnas

    Este diseño cuenta con lo siguiente:

    – Container
    – Header
    -Top Navigation Menu
    – Left Navigation Menu
    – Right Navigation menu
    – Content Part
    – Footer

    Aqui vemos el codigo html del index:

    <div id=container>
    <div id=”header”>
    <h2>Header</h2>
    </div>
    <div id=”topnav-container”>
    <ul id=”topnav”>
    <li> <a href=”#”>Home</a> </li>
    <li> <a href=”#”>Categories</a> </li>
    <li> <a href=”#”>Services</a> </li>
    <li> <a href=”#”>About us</a> </li>
    <li> <a href=”#”>Contact us</a> </li>
    </ul>
    </div>
    <div id=”leftnav”>
    This is a left navigation bar.
    This is a left navigation bar
    This is a left navigation bar
    </div>
    <div id=”rightnav”>
    This is a right navigation bar
    </div>
    <div id=”content”>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
    </p>
    </div>
    <div id=”footer”>
    <h2>Footer</h2>
    </div>
    </div>

    Aqui vemos el CSS que formatea este diseño:

    #container {
    margin: 10px auto;
    width: 95%;
    border: 1px solid gray;
    }
    #header {
    padding: 3px;
    border-bottom: 1px solid gray;
    }
    #topnav-container {
    border-bottom: 1px solid gray;
    padding: 4px 0;
    background: #e0e0e0;
    }

    %