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.