Crear nuestro generador de meta tags

Publicado por: ★★★★★ Oliver ★★★★★ en: HTML -

Generador de meta tags Para mi como para ti tal vez, es muy importante que nuestro blog sea encontrado por los motores de búsqueda.
Y si bien existe la opción de introducir la Url de tu blog en:
Bing, Google, Troglog, Baidu, etc,.

Hay una mejor alternativa que es por medio de meta etiquetas o meta tags que harán todo lo posible por mejorar el posicionamiento de tu blog ya sea en google, bing, etc,.
A lo mejor creerás que te mostrare un código o te enlazare a un sitio que genere meta tags pero porque no hacer nuestro propio generador.

Puesdes verlo funcionar ahora!:

Primer paso:
Primero te transladas a tu plantilla y buscas (Ctrl+F) la etiqueta </head>.
Ya que la encontraste coloca arriba el siguiente código Javascript quien hará el trabajo necesario para generar los meta tags:

<!--Generador de meta tags-->  
<script type='text/javascript'>

//<![CDATA[

function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}

function create(form) {
  if (confirm("Estas seguro(a)?")) {
    form.story.value = "Coloca los meta tags " +
      "después de la etiqueta <head>.nn"; 
    if (form.input1.value != "") {
      form.story.value +="<META NAME="title" CONTENT="" + 
      form.input1.value + "" />n";
    }
    if (form.input2.value != "") {
      form.story.value +="<b:if cond='data:blog.url == data:blog.homepageUrl'>n<META  NAME="Description" CONTENT="" + 
      form.input2.value + "" />n</b:if>n";
    }
    if (form.input3.value != "") {
      form.story.value +="<META NAME="Keywords" CONTENT="" + 
      form.input3.value + "" />n";
    }
    if (form.input4.value != "") {
      form.story.value +="<META NAME="Author" CONTENT="" + 
      form.input4.value + "" />n";
    }
    if (form.input5.value != "") {
      form.story.value +="<META NAME="Robots" CONTENT="" + 
      form.input5.options[form.input5.selectedIndex].value + "" />n";
    }
  }
}

function about() {

   msg=open("about.html","DisplayWindow","toolbar=no,width=280,height=420,directories=no,status=no,scro llbars=yes,resize=no,menubar=no");
}

//]]>
</script>

Segundo paso:
Ahora vas a elementos HTML/Javascript e incrustas el siguiente código HTML quien le dará forma e imagen a la caja o recuadro y color a los 2 botones:

<form><table><tr><td>
Titulo:
</td><td><input type="text" name="input1" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Descripción:
</td><td><input type="text" name="input2" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>     
Palabras clave:
</td><td><input type="text" name="input3" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Autor(Opcional):
</td><td><input type="text" name="input4" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />
</td></tr><tr><td>
Robots (Opcional):
</td><td><select type="text" name="input5" size="1" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;"><option value="All" selected />All<option value="none" />None<option value="Index" />Index<option value="No Index" />No Index<option value="Follow" />Follow<option value="No Follow" />No Follow</select>
</td></tr></table> 
<textarea wrap name="story" style="background-image: url(Url-de-tu-imagen); color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif; width: 590px; height: 200px;"></textarea>
<input type="button" value="Crear meta tags" onclick="create(this.form)" style="background-color: #007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" /> <input type="reset" value="Limpiar" style="background-color:#007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px  'trebuchet ms',helvetica,sans-serif;" />
</form>

Y tercer paso:
Por último solo edita los valores como tu decidas para adaptarlo a tu propio blog:

Las 5 opciones:

Tamaño de los recuadros

Color del texto

Color, tamaño y tipo de borde

Tipo y tamaño de letra

<input type="text" name="input1" size="40" style="color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />

Caja:

Imagen

Color del texto

Color, tamaño y tipo de borde

Tipo y tamaño de letra

Ancho

Alto

<textarea wrap name="story" style="background-image: url(Url-de-tu-imagen); color: #000000; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif; width: 590px; height: 200px;"></textarea>

Botones:

Titulo

Color de fondo

Color de texto

Color, tamaño y tipo de borde

Tipo y tamaño de letra

<input type="button" value="Crear meta tags" onclick="create(this.form)" style="background-color: #007000; color: #FFFFFF; border:1px solid #009900; font-family: 12px 'trebuchet ms',helvetica,sans-serif;" />

Recuerda que es una imagen de fondo la que tiene el recuadro, sin embargo podrás cambiarla por color colocando: background-image: url(Url-de-tu-imagen); por background-color: #color;

Ya que generes tus meta tags introdúcelos abajo de la etiqueta <head>.
Espero y te sirva en algo..Hasta pronto!