Skip to content

Instantly share code, notes, and snippets.

@jorgejaramillo

jorgejaramillo/index.html

Forked from anonymous/index.html
Last active July 4, 2016 18:18
Show Gist options
  • Save jorgejaramillo/4eb879c50cd887bf99894e3f33ef1d62 to your computer and use it in GitHub Desktop.
Save jorgejaramillo/4eb879c50cd887bf99894e3f33ef1d62 to your computer and use it in GitHub Desktop.
Download ZIP
Generador de HTML
Raw
index.html
<body>
<div>
<div class="container">
<div class="row">
<div class="col-sm-9 header">
<h1>Generador de Metatags</h1>
<h2>Para SEO y Social Media</h2>
<h3>Creado por Jorge Jaramillo</h3>
<hr>
</div>
</div>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Título Para SEO</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="titulo" value="" size="100" maxlength="70" placeholder="Título Para SEO">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Descripción</label>
<div class="col-sm-7">
<textarea id="descripcion" size="220" maxlength="220" type="text" class="form-control" rows="3" id="inputPassword3" placeholder="Esta es la descripción que leerán los usuarios en Google"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Keywords (?)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="keywords" placeholder="Sepáralas por coma">
</div>
<div class="form-inline"><label for="inputPassword3" class="col-sm-1 control-label">Idioma</label><select id="idioma" class="form-control">
<option>Español Colombia es_co</option>
<option>Español</option>
<option>Español España</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Nombre del autor</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="autor" placeholder="Nombre Autor">
</div>
<div class="form-inline"><label for="inputPassword3" class="col-sm-3 control-label">Indexación para mototres de búsqueda</label><select id="index" class="form-control">
<option>index, follow (Seguir)</option>
<option>noindex, follow</option>
<option>noindex, nofollow</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">URL canónica</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="canonical" placeholder="Canónica">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" name="button" id="button" value="GENERAR ETIQUETAS" onclick="gen_metatags()" class="btn btn-default">
</div>
</div>
<hr>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">URL canónica</label>
<div class="col-sm-7">
<textarea id="metatags" class="form-control" rows="8"></textarea>
</div>
</div>
</form>
<p class="lead">Esta herramienta facilita</p>
</div>
Raw
kXwwKz.markdown

Generador de HTML

Raw
script.js
function gen_metatags(){
document.getElementById('metatags').value='<title>'+document.getElementById('titulo').value+'</title>'
document.getElementById('metatags').value+="\n"+'<meta name="title" content="'+document.getElementById('titulo').value+'" />'
document.getElementById('metatags').value+="\n"+'<meta name="description" content="'+document.getElementById('descripcion').value+'" />'
document.getElementById('metatags').value+="\n"+'<meta name="keywords" content="'+document.getElementById('keywords').value+'" />'
document.getElementById('metatags').value+="\n"+'<meta http-equiv="content-language" content="'+document.getElementById('idioma').value+'" />'
document.getElementById('metatags').value+="\n"+'<meta name="robots" content="'+document.getElementById('index').value+'" />'
document.getElementById('metatags').value+="\n"+'<link rel="canonical" href="'+document.getElementById('canonical').value+'" />'
document.getElementById('metatags').value+="\n"+'<meta name="author" content="'+document.getElementById('autor').value+'" />'
}
Raw
style.css
.header {text-align:center;}
h1 {
font-size: 28px;
text-transform: uppercase;
color: #2b7b98;
}
h2 {
font-size: 23px;
margin: 0px;
text-transform: uppercase;
font-weight: 200;
}
h3 {
text-transform: uppercase;
font-size: 15px;
margin: 11px;
color: #d2d2d2;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment