mcollinge

Bookmarklet for displaying page metadata (handy for SEO tasks)

Blog Post created by mcollinge on Dec 7, 2016

This is the second bookmarklet we use to help with our work on element14 Community. If you're not sure what bookmarklets are, I explain them in this other blog post; Bookmarklet for displaying Jive content IDs

 

This bookmarklet will display a panel containing the page metadata which is handy for SEO-related tasks. Here's how it looks on JiveWorks;

 

 

And here's how it looks on element14 Community, where we've got extra items like the canonical URL being included across the site, the Open Graph protocol, etc;

 

 

The JavaScript for this bookmarklet is here;

 

javascript:var html='';function encode(r){return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g,function(r){return "&#"+r.charCodeAt(0)+";";});}var canonical=$j('link[rel=canonical]');if(canonical.length>0)html+=encode('<link rel="canonical" href="'+$j('link[rel=canonical]')[0].href+'">')+'<br>';html+=encode('<title>'+$j('title').html()+'</title>')+'<br>';var meta=$j('meta');for(var i=0;i<meta.length;i++){if(!meta[i].itemprop){html+=encode(meta[i].outerHTML)+'<br>';}}$j('.e14-page-info').remove();$j('body').prepend('<div style="border:1px solid grey; height:auto;; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');void(0);

 

If you're interested in the uncompressed source, here it is (to use this in a bookmarklet, you'll need to run it through a service like this);

 

var html = '';

function encode(r) {
  return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g, function(r) {
  return "&#" + r.charCodeAt(0) + ";";
  });
}

html += encode('<link rel="canonical" href="'+$j('link[rel=canonical]')[0].href+'">')+'<br>';
html += encode('<title>'+$j('title').html()+'</title>')+'<br>';

var meta = $j('meta');
for (var i=0; i<meta.length; i++) {
  if (!meta[i].itemprop) {
  html += encode(meta[i].outerHTML)+'<br>';
  }
}

$j('.e14-page-info').remove();
$j('body').prepend('<div style="border:1px solid grey; height:auto;; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');

void(0);

Outcomes