Con esta entrada, voy a explicar cómo programar dinámicamente las etiquetas meta de la cabecera de las páginas web que se quieran programar con código Asp.Net.
Dichas etiquetas son fundamentales entre otras cosas, para conseguir un buen posicionamiento en buscadores web.
En este post no voy a explicar su importancia, aquí voy a explicar cómo manipularlas bajo código asp.net (vb codebehind), ideal para todo aquel que (como yo) quiera generar url’s dinámicas (labor importante para SEOs) para alguno de sus proyectos, aunque también e importante en cualquier caso si quieres especificar sus valores desde una base de datos.
Nota: Para escribir el título de la página (title) , no hace falta recurrir a dicho objeto, pues para tal fin bastará con usar:
Page.Title = “El título de la página” ‘<– como vemos, especificar el título es bastante sencillo
El objeto que lleva a cabo todas las labores de programación lado servidor de las etiquetas Meta es el:
HtmlMeta
Para todas las etiquetas meta (description, keywords, copyright, content-language, etc ..), habrá que utilizar el citado objeto. Ante todo debo incidir que en la etiqueta <Head> de nuestro .aspx, deberemos poner (si no esta), el argumento RunAt=”Server”
Veamos en un ejemplo cómo podemos escribir de forma programática bajo asp.net la etiqueta description:
Page.Title = “El título de la página” ‘<– como vemos, especificar el título es bastante sencillo
Dim HeaderMetaTags As New HtmlMeta ‘Instanciamos el objeto
HeaderMetaTags.Name = “Description” ‘Le atribuimos el nombre de la etiqueta que tendrá que escribir en la pág.
HeaderMetaTags.Content = “La descripción de su página web” ‘Le indicamos su valor
‘Le indicamos a la cabecera de la página (page.header), que añada dicho objeto que se encargará de escribirla
Page.Header.Controls.Add(HeaderMetaTags)
Ahora te dirás, ¡ bien pues ya puedo empezar a escribir todas las etiquetas que considere !,
pero advertencia !, al crear (querer poner) varias etiquetas, tendrás que crear una instancia nueva del objeto HtmlMeta (y con diferente nombre) para cada etiqueta que quieras poner.
Verás pues que si utilizas el siguiente:
CODIGO INCORRECTO
Dim HeaderMetaTags As New HtmlMeta ‘Instanciamos el objeto
HeaderMetaTags.Name = “Description” ‘Le atribuimos el nombre de la etiqueta que tandrá que escribir en la pág.
HeaderMetaTags.Content = “La descripción de su página web” ‘Le indicamos su valor
‘Le indicamos a la cabecera de la página (page.header), que añada dicho objeto que se encargará de escribirla
Page.Header.Controls.Add(HeaderMetaTags)
‘|||Si utilizamos la misma instancia del HtmlMeta, .net sólo escribirá la última||| ———- PARTE DE CODIGO ERRONEO ———-
HeaderMetaTags.Name = “Keywords”
HeaderMetaTags.Content = “palabra_clave1, palabras clave2, etc ..”
Page.Header.Controls.Add(HeaderMetaTags)
RESULTADO INCORRECTO
Fíjate que en el código fuente de la pag., ¡ sólo se esta escribiendo la última etiqueta programada !, y no las 2 (description y keywords)
Como comenté, tendrás que crear una instancia nueva para cada etiqueta
CODIGO CORRECTO AUNQUE MEJORABLE (luego explico como mejorarlo)
Dim HeaderMetaTags_Descripcion As New HtmlMeta ‘Instanciamos el objeto para la etiqueta Description
HeaderMetaTags_Descripcion.Name = “Description” ‘Le atribuimos el nombre de la etiqueta
HeaderMetaTags_Descripcion.Content = “La descripción de su página web” ‘Le indicamos su valor
Page.Header.Controls.Add(HeaderMetaTags_Descripcion)
Dim HeaderMetaTags_PalabrasClave As New HtmlMeta ‘Instanciamos una 2ª nueva instancia del objeto
HeaderMetaTags_PalabrasClave.Name = “Keywords”
HeaderMetaTags_PalabrasClave.Content = “palabra_clave1, palabras clave2, etc ..”
Page.Header.Controls.Add(HeaderMetaTags_PalabrasClave)
RESULTADO CORRECTO AUNQUE MEJORABLE
Como ves, utilizando el código anterior conseguimos que figuren las 2 etiquetas. ¿ Pero porque mejorable ?
Te dirás .. Que palo, o .. que mal eso de tener que escribir una instancia nueva para cada etiqueta, además ..
¿ Y si se quieren escribir tantas etiquetas como así estuvieran en una base de datos ?
Para tal fin, fuera el que fuese, si no queremos tener que escribir una nueva instancia para cada etiqueta (y así escribir menos líneas de código), hay que emplear arrays y un bucle que recorra sus items para escribir las etiquetas.
CODIGO CORRECTO CASI PERFECTO
Dim HeaderMetaTagsArray_Nombres As New ListItemCollection ‘Nuevo array para los nombres de etiquetas (tantos como de ellas queramos poner)
HeaderMetaTagsArray_Nombres.Add(“Description”)
HeaderMetaTagsArray_Nombres.Add(“Keywords”)
HeaderMetaTagsArray_Nombres.Add(“Copyright”)
Dim HeaderMetaTagsArray_Valores As New ListItemCollection ‘Nuevo array para los valores (el content de la etiqueta) (tantos como el anterior array)
HeaderMetaTagsArray_Valores.Add(“Mi descripcion es ..”)
HeaderMetaTagsArray_Valores.Add(“Palabra1, palabra2, ..”)
HeaderMetaTagsArray_Valores.Add(“Alejandro B. Martin”)
For i = 0 To HeaderMetaTagsArray_Nombres.Count - 1 ‘Recorremos un bucle desde 0 hasta el total de etiquetas que queramos poner (definidas en 1er array)
Dim HeaderMetaTags As New HtmlMeta ‘al estar dentro de un bucle, se irá creando (instanciando nuevamente) dicho objeto cada vez que pertoque
HeaderMetaTags.Name = HeaderMetaTagsArray_Nombres(i).Value
HeaderMetaTags.Content = HeaderMetaTagsArray_Valores(i).Value
Page.Header.Controls.Add(HeaderMetaTags) ‘Así pues para cada etiqueta (en HeaderMetaTagsArray_Nombres) se escribirá correctamente.
Next
RESULTADO CASI PERFECTO
Y ahora me preguntarás ¿Porque casi perfecto ?
Realmente ya esta bien, pero el código debería mejorarse en cualquiera de los siguientes casos:
- Quieres aprender más | y/o
- Te gusta hacer tus proyectos lo mejor posible | y/o/u opcional
- Estas buscando posicionar bien tus páginas en los navegadores (SEO)
Llegado a este punto, ya lo tienes casi todo, pero si buscas la perfección y el buen hacer, verás que el resultado (acude al navegador y haz ver código fuente de l página) no queda todo lo deseable que esperaríamos de cualquier página web escrita manualmente, y el objetivo es hacer parecer a la página lo más similar a como si se hubiesen puesto las etiquetas manualmente (util para SEOs como yo, jj).
Fíjate en la captura de pantalla anterior y verás que:
Las etiquetas aparecen seguidas todas ellas, sin dejar la línea de retorno de carro típica, y ello quizá no sea lo más correcto si nuestro fin es el posicionamiento (y no queremos que google se de cuenta de que es una página dinámica, pues no le gustan tanto como las estáticas, pues el prefiere .htm (si es que ..)), vamos que lo correcto sería encontrarse en la página algo así como:
<head>
<title>Titulo</title>
<meta name=”x” content=”x”>
<meta name=”y” content=”y”>
..
</head>
Pues ahora explico el “resultado perfecto” (recordemos que nadie es perfecto pero ello no quita de)
Además de lo comentado (situar espaciadamente las etiquetas), si nuestro objetivo es el conseguir el buen posicionamiento en cuantos más buscadores mejor, además definiremos ampliamente a cada una de las etiquetas meta, pues además de la tan conocida propiedad Name, también existen para casi el mismo fin HttpEquiv e ID (y nosotros queremos que todos los buscadores nos entiendan y de paso vean que bien trabajamos, jj).
Para poder dar el retorno de carro después de que se escriba cada etiqueta utilizaremos el objeto literal para escribir dicho retorno de carro jto. a un espaciado tab.
Page.Title = “El título de la página” ‘<– como vemos, especificar el título es bastante sencillo
Dim HeaderMetaTagsArray_Nombres As New ListItemCollection ‘Nuevo array para los nombres de etiquetas (tantos como de ellas queramos poner (3 en este ejemplo))
HeaderMetaTagsArray_Nombres.Add(“Description”)
HeaderMetaTagsArray_Nombres.Add(“Keywords”)
HeaderMetaTagsArray_Nombres.Add(“Copyright”)
Dim HeaderMetaTagsArray_Valores As New ListItemCollection ‘Nuevo array para los valores (el content de la etiqueta) (tantos como el anterior array)
HeaderMetaTagsArray_Valores.Add(“Mi descripcion es ..”)
HeaderMetaTagsArray_Valores.Add(“Palabra1, palabra2, ..”)
HeaderMetaTagsArray_Valores.Add(“Alejandro B. Martin”)
For i = 0 To HeaderMetaTagsArray_Nombres.Count - 1 ‘Recorremos un bucle desde 0 hasta el total de etiquetas que queramos poner (definidas en 1er array)
Dim HeaderMetaTags As New HtmlMeta ‘al estar dentro de un bucle, se irá creando (instanciando nuevamente) dicho objeto cada vez que pertoque
HeaderMetaTags.Name = HeaderMetaTagsArray_Nombres(i).Value
HeaderMetaTags.HttpEquiv = HeaderMetaTagsArray_Nombres(i).Value
HeaderMetaTags.ID = HeaderMetaTagsArray_Nombres(i).Value
HeaderMetaTags.Content = HeaderMetaTagsArray_Valores(i).Value
Dim SaltoDeLinea As Literal = New Literal() ‘Utilizamos el objeto literal
SaltoDeLinea.Text = vbCrLf & vbTab ‘(salto de linea) (espaciado TAB)
Page.Header.Controls.Add(SaltoDeLinea)
Page.Header.Controls.Add(HeaderMetaTags) ‘Así pues para cada etiqueta (en HeaderMetaTagsArray_Nombres) se escribirá correctamente.
If i = HeaderMetaTagsArray_Nombres.Count - 1 Then Page.Header.Controls.Add(New LiteralControl(vbCrLf)) ‘llego al final y también queremos retorno de carro (esta vez sin el TAB)
Next
RESULTADO “PERFECTO“
Aunque ..
Como decía en una linea aquello de que nadie es perfecto, y si miras bien el resultado, verás que para rematar la faena, aún queda dejar un retorno de carro y espaciados para la etiqueta title, y ella no se manipula con el objeto HtmlMeta sino directamente a través de page.title, pues como hacerlo, como hacer que quede del todo perfecto ..
.. eso es cosa tuya !
–——
El autor cede los derechos de publicación del presente artículo siempre y cuando se mencione al mismo y a esta url-dirección web.
———
