Simple Meta Tag Generator Using JavaScript

Published on November 10, 2012

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.

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.