Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Location
    london
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help needed with 'simple' SEO JavaScript form

    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
    www.coolwebsite.com/cool-web-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

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hope this gets you started:
    Code:
    <script type="text/javascript">
    function update(el, target) {
    	document.getElementById(target).innerHTML = el.value;
    }
    </script>
    <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>
    </fieldset>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    justletgo (10-05-2011)

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Location
    london
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •