Simple js to add frontend tags generated from meta keywords


(Talk) #1

Most of you will have metadata keywords applied across your websites, but are you getting much use from them? Put them to work with this dead-easy script.

 

This takes 2 minutes to implement and will add a whole new layer of navigation to your website.

 

This won't work without jQuery, so get it if you haven't already.

 

Make sure you have a search asset configured to search for keywords, and replace '/path-to-search' with the URL to your search page.

// TAGS
$(document).ready(function(){ // FIND AND PRINT THE TAGS
    var sqTags = $('meta[name=keywords]').attr('content');
    if(! sqTags){
    }else{
    var sqTags = sqTags.replace(/;/g,',');
    $('h1:first').after('<div class="sqTags">' + sqTags + '</div>');
    makeTags();
    }
});

function makeTags(){  // LINK EACH TAG
    $(’.sqTags’).each(function(){
    var obj = $(this),
            tags = obj.text().split(’,’),
            i = 0,
            len = tags.length;
            if (obj.text()) {
                for (i; i < len; i++) {
                    var tag = tags[i].replace(/(^\s*)|(\s*$)/g, ‘’);
                    if (tag !== “”) {
                    tags[i] = ‘<a title=“See all items related to ’ + tag + '” href="/path-to-search?queries_keyword_query=’ + encodeURIComponent(tag) + ‘">’ + tag + ‘</a>’;
                    }
                }
            obj.html(tags.join(’ '));
            }
    });
}
// END TAGS

Any pages with keywords separated with commas or semicolons in your website will now display linked tags beneath the first <h1> element (just in case you have more than one H1 per page).

 

Style it up with CSS and that's it, you're done.

 

Detailed instructions and implementation demonstration here.