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
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…