View Full Version : Help needed with 'simple' SEO JavaScript form

10-02-2011, 10:47 PM
Hi Coders...

I'm building a 'really simple' JavaScript program to help editors write SEO-friendly META titles and META descriptions. The idea is you have 3 text boxes, each on a separate line:

BOX 1 - META TITLE [ i.e. "Cool website page" ]
BOX 2 - FILE NAME [ i.e. "This is a really cool web page about cool stuff"]
BOX 3 - META DESCRIPTION [ i.e. "cool-web-page" ]

As the editor types in the boxes, a serp listing is displayed as it would appear on Google (and ideally how it would appear on Bing and Yahoo):

Cool website page
This is a really cool web page about cool stuff

Kudos to any one who could point a JavaScript newbie in the right direction :)

10-03-2011, 01:40 AM
Hope this gets you started:

<script type="text/javascript">
function update(el, target) {
document.getElementById(target).innerHTML = el.value;
<label for="title">Meta Title: </label><input id="title" onkeyup="update(this, 'el_title')" type="text"><br>
<label for="file_name">File Name: </label><input id="file_name" type="text"><br>
<label for="meta_desc">Meta Description: </label><input id="meta_desc" onkeyup="update(this,'el_meta')" type="text"><br><br>

<fieldset style="width:400px;border:1px solid #999"><legend>...as appears on Google</legend>
<strong style="color:#00f;font-size:12pt;" id="el_title">Cool website page</strong><br>
<span style='color:green;'>www.coolwebsite.com/cool-web-page</span><br>
<span id="el_meta">This is a really cool web page about cool stuff</span>

10-05-2011, 08:22 PM
Really appreciate your help on this Ray. Code works a treat. I'm gonna have a lot of fun tweaking it now. Kudos to you sir!