HTML: Geolocalizar una página web con los tags GEO

HTML: Geolocalizar una página web con los tags GEO
by Janeth Kent Date: 06-12-2013 geo html geotags

En este pequeño tutorial mostraremos como geolocalizar de manera sencilla una determinada página web usando las etiquetas meta del head. Las tres principales etiquetas meta de geolocalización son:

<META NAME="geo.position" CONTENT="latitud; longitud" />
<META NAME="geo.placename" CONTENT="ciudad o nombre del lugar" />
<META NAME="geo.region" CONTENT="país" />

geo.position

La etiqueta geo.position contiene en primer lugar la latitud geográfica, seguida de la longitud geográfica. El separador entre ambos valores es obligatorio, y ha de ser un punto y coma (;). El separador decimal de la latitud y longitud debe ser un punto (.) y no una coma.
El número de dígitos usado detrás del punto decimal es libre para el usuario.

geo.placename

La etiqueta geo.placename indica el nombre del lugar. Normalmente el lugar es su ciudad o pueblo más cercano. Evitar aquí volver a repetir los mismos datos de la etiqueta geo.region como son el país o el nombre de la región. No es necesario que se mencionarlos dos veces.

geo.region

La etiqueta geo.region se compone de dos partes: código de país y código regional. El separador entre las dos es un guión (-). No son permitidos espacios adicionales antes o detrás del guión. El código regional es opcional para los países que no tienen códigos regionales.

Los códigos de cada país siempre constan de dos letras mayúsculas, correspondiente norma  “ISO 3166-1″. Por ejemplo, “ES” para España.

Los códigos regionales constarán de 1 a 3 letras mayúsculas o caracteres numéricos, correspondiente norma ”ISO 3166-2″, como “VC” de la comunidad Valenciana o “V” de la ciudad de Valencia.

Ejemplo de uso para geolocalizar una página web de la comunidad Valenciana:

<META NAME="geo.position" CONTENT="l39.484011;-0.753281" />
<META NAME="geo.placename" CONTENT="Comunidad Valenciana" />
<META NAME="geo.region" CONTENT="ES-VC" />

Para conseguir las coordenadas de la latitud y longitud de un determinado lugar podeis utilizar esta página web http://www.geo-tag.de que utiliza el api de google maps.

Códigos regionales de España (ES):

ES-AN : Andalucía
ES-AR : Aragón
ES-O : Asturias, Principado de
ES-CN : Canarias
ES-S : Cantabria
ES-CM : Castilla-La Mancha
ES-CL : Castilla y León
ES-CT : Cataluña
ES-EX : Extremadura
ES-GA : Galicia
ES-PM : Islas Baleares
ES-LO : La Rioja
ES-M : Madrid, Comunidad de
ES-MU : Murcia, Region de
ES-NA : Navarra, Comunidad Foral de
ES-PV : País Vasco
ES-VC : Valenciana, Comunidad
ES-VI : Álava
ES-AB : Albacete
ES-A : Alicante
ES-AL : Almería
ES-O : Asturias
ES-AV : Ávila
ES-BA : Badajoz
ES-PM : Baleares
ES-B : Barcelona
ES-BU : Burgos
ES-CC : Cáceres
ES-CA : Cádiz
ES-S : Cantabria
ES-CS : Castellón
ES-CR : Ciudad Real
ES-CO : Córdoba
ES-CU : Cuenca
ES-GE : Gerona
ES-GR : Granada
ES-GU : Guadalajara
ES-SS : Guipuzcua
ES-H : Huelva
ES-HU : Huesca
ES-J : Ja
ES-C : La Coruña
ES-LO : La Rioja
ES-GC : Las Palmas
ES-LE : León
ES-L : Lérida
ES-LU : Lugo
ES-M : Madrid
ES-MA : Málaga
ES-MU : Murcia
ES-NA : Navarra
ES-OR : Orense
ES-P : Palencia
ES-PO : Pontevedra
ES-SA : Salamanca
ES-TF : Santa Cruz De Tenerife
ES-SO : Segovia
ES-SE : Sevilla
ES-SO : Soria
ES-T : Tarragona
ES-TE : Teruel
ES-TO : Toledo
ES-V : Valencia
ES-VA : Valladolid
ES-BI : Vizcaya
ES-ZA : Zamora
ES-Z : Zaragoza
ES-CE : Ceuta
ES-ML : Melilla

 
by Janeth Kent Date: 06-12-2013 geo html geotags visitas : 10267  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Guia: Como escribir los enlaces mailto en puro HTML

¿Qué es el enlace mailto El enlace Mailto es un tipo de enlace HTML que activa el cliente de correo predeterminado en el ordenador para enviar un correo electrónico. El navegador web…

Cómo importar HTML en Google Docs

Google Docs es un procesador de textos muy flexible en muchos sentidos, pero lo que mucha gente no se da cuenta es que se puede incrustar HTML en un Google…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Imágenes responsivas y atributos srcset and sizes

En la revolución del diseño web, las imágenes son una cosa que aparentemente se ha quedado atrás. Hasta hace relativamente poco, servir diferentes imágenes en función del tamaño de la…

24 recursos gratuitos para programadores novatos

Cuando estamos descubriendo nuevas áreas, una pequeña ayuda es siempre bien venida. En la programación, los recursos existen en grandes cantidades para ayudar a todos los tipos de desarrolladores. Para…

10 increíbles experimentos con HTML5

Los laboratorios de innovación se llenan de creación e ideas impresionantes. Este es el caso de Chrome Experiments, creado para que los desarrolladores  den rienda suelta a la  imaginación y expongan…

Reproductores Audio y Video en HTML5

Una de las aportaciones más útiles de  HTML5, es la posibilidad de mejorar la reproducción de archivos multimedia, audio y video, en nuestra web. Además HTML5 nos permite construir reproductores tanto…

Cómo crear un selector de color con HTML5 Canvas

HTML5 Canvas es una tecnología que permite a los desarrolladores generar gráficos y animaciones en tiempo real utilizando JavaScript. Proporciona un lienzo en blanco en el cual se pueden dibujar…

Clicky