Simple Meta Tag Generator Using JavaScript

Meta Tags are very useful for SEO(Search Engine Optimization). Today I will give you Meta Tag generator script using JavaScript. The logic is very simple.
Simple Meta Tag Generator Using JavaScript-Techumber.com


demo

download

Logic Step 1: Gather Page title,Page description,Meta keywords and Author Name.
Step 2: On Clicking Generate button call genMeta() JavaScript function.
Step 3: Format a string using the info gathered in step 1. HTML

<div class="mtgen">  
<form>  
<div class="r">  
<label>Title</label>  
<input name="text" type="text" id="title" size="45" autofocus="autofocus" required="required" />  
</div>  
<div class="r">  
<label> Description </label>  
<textarea name="desc" id="desc" cols="35" rows="5" required="required"></textarea>  
</div>  
<div class="r">  
<label>Keywords (Separate by commas)</label>  
<textarea name="keywords" id="keywords" cols="35" rows="5" required="required"></textarea>  
</div>  
<div class="r">  
<label>Author</label>  
<input name="author" type="text" id="author" size="45" required="required" />  
</div>  
<div class="r sbt">  
<input type="submit" value="Generate" class="sbt" id="gnrt" onclick="genMeta(); return false;"/>  
</div>  
</form>  
</div>  
<div id="result"></div> 

Here We using form to gather data form user. The result div used to display generated code. We can copy this code and past it in our web page. Here onclick we calling genMeta() function.
Read: Exactly Facebook Like URL Parsing Using PHP & Jquery
genMeta()

<div class="mtgen">  
<form>  
<div class="r">  
<label>Title</label>  
<input name="text" type="text" id="title" size="45" autofocus="autofocus" required="required" />  
</div>  
<div class="r">  
<label> Description </label>  
<textarea name="desc" id="desc" cols="35" rows="5" required="required"></textarea>  
</div>  
<div class="r">  
<label>Keywords (Separate by commas)</label>  
<textarea name="keywords" id="keywords" cols="35" rows="5" required="required"></textarea>  
</div>  
<div class="r">  
<label>Author</label>  
<input name="author" type="text" id="author" size="45" required="required" />  
</div>  
<div class="r sbt">  
<input type="submit" value="Generate" class="sbt" id="gnrt" onclick="genMeta(); return false;"/>  
</div>  
</form>  
</div>  
<div id="result"></div> 

Here we gether all info we want, format a string and display it on result section.
Style

body {  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
font-size: 14px;  
line-height: 20px;  
color: #333333;  
} 
.container{ 
width: 570px;  
margin: 0 auto;  
} 
.logo{ 
text-align: center;  
} 
.mtgen .r{ 
margin: 20px 0px 20px;  
} 
.mtgen .r label{ 
float: left;  
width: 140px;  
padding-top: 5px;  
text-align: right;  
font-size: 14px;  
font-weight: normal;  
line-height: 20px;  
margin-right: 40px;  
} 
.mtgen .sbt input{ 
color: #fff;  
font-weight: bold;  
cursor: pointer;  
margin: 0 0 0 5px;  
padding: 6px 10px;  
border: 1px solid #777;  
background: #333537;  
border-radius: 5px;  
} 
input[type="text"],textarea{  
border: 1px solid #cccccc;  
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  
outline: none;  
padding: 4px 6px;  
font-size: 14px;  
line-height: 20px;  
color: #555555;  
border-radius: 3px;  
width: 310px;  
} 
.mtgen .sbt{ 
text-align: center;  
} 

Personally I never like default styles of the form. Here we applying little styles so that it look more beautiful.
That's it.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.