Have you ever wanted to create a google preview snippet tool for your site? If so, I got you covered. To start off you will need to create a new html document with three input fields. The input fields that we need too use are Title, Site Description, and URL. Here  is the code that will be used to create these input fields.

 

<div class="serpPreview-wrap">

    <div id="serpPreviewForm">
        <div class="title-group">

            <label for="preview-title">Title</label>
            <input id="preview-title" type="text" name="preview-title">

        </div>

        <div class="description-group">

            <label for="description-preview">Site Description</label>
            <textarea id="description-preview" type="text" rows="3" name="description-preview"></textarea>

        </div>

        <div class="preview-group">

            <label for="preview-url">Url</label>
            <input id="preview-url" type="url" name="preview-url">
            
        </div>

    </div>

    <div class="preview-results">Preview</div> 

    <div id="serpPreview"></div>

</div>

Some simple styling too apply too this.

 

#serpPreview{
    font-family: arial, sans-serif;
}
#serpPreview .title a{
    color: #12C;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    height: auto;
    line-height: 19px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
    visibility: visible;
    width: auto;
}

#serpPreview .url{
    color: #093;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    height: auto;
    line-height: 16px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: left;
    visibility: visible;
    max-width: 600px;   
}

#serpPreview .description{
    color: #222;
    font-family: inherit;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 18.2px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: left;
    visibility: visible;
    max-width: 600px;
}

#preview-title, #description-preview, #preview-url{
    clear: both;
    font-family: 'Open Sans', Arial, sans-serif;
    padding: 0 5px;
    margin-bottom: 20px;
    width: 100%;
    height: 30px;
}
input#preview-title, input#preview-url, textarea#description-preview{
    border-color: #d2d2d2;
    border-style: solid;
    border-width: 1px;
}

.serpPreview-wrap{
    max-width: 600px;
    margin: 0px auto; 
    display: block;
}

.preview-results{
    display: table;
    margin: 1rem; 
}

textarea#description-preview{
    line-height: 1.4rem;
}

The next part of this project is too include jQuery, and also include the next two javascript scripts.jQuery must be included before the next JS Script. After jQuery has been included you will need to add the following jQuery script.

 

(function($) {

    $.fn.serpPreview = function(options) {

        var DESC_LENGHT = 156;

        return this.each( function() {
            // Create the html to insert on target element
        	var html = "";
            html += "<div class='serpPreview'>";
        	html += "<div class='PreviewContainer'>";

        	html += "<div class='title'>" + "<a href='#'>" + options.preview_title + "</a>" + "</div>";
        	html += "<div class='url'>" + options.preview_url + "</div>";
        	html += "<div class='description'>" + truncate(options.preview_description, DESC_LENGHT) + "</div>";

        	html += "</div>";
            html += "</div>";

            // Insert the html created on target element
            $(this).html(html);
        });

    }

    function truncate(text, maxLength) {
        if (text.length > maxLength) {
            text = text.substr(0, maxLength-3) + "...";
        }
        return text;
    }

}(jQuery));

The final part is too add the last js script that gets the users input when the user clicks on the submit button.

jQuery(document).ready(function($){

    // this is the default content that will be displayed.
    var default_settings = {
            preview_title: "This is an example title.",
            preview_url: "www.test.com/example-title",
            preview_description: "yellow bunny"
    };

    $("#serpPreview").serpPreview(default_settings);
    
    // this will be displayed after the user has inputed there content into the form. 
    $( ".preview-results" ).click(function( event ) {
        event.preventDefault();

        // todo grab these values from the users input. 
        var preview_title = $('#preview-title')[0].value;
        var preview_url = $('#preview-url')[0].value;
        var preview_description = $('#description-preview')[0].value; 


        // setting up the serp preview
        var user_settings = {
            preview_title: preview_title,
            preview_url: preview_url,
            preview_description: preview_description
        };

        $("#serpPreview").serpPreview(user_settings);
    });
    

});

Notes have been added too the code to help individuals figure out what is going on within this JS code.  One thing I recommend doing is adding some validation within the input fields, before setting up the Serp Preview.

Categories
Website Guides