Bookmarklet to Redirect from AMP URLs to Real URLs

I’m working on a few articles related to Google’s AMP format, and I’ve noticed one of the big gripes people have with AMP, as well as the AMP CDN that serves content for the Google News carousel, is how it’s “impossible” to find the original article’s URL.

This makes the undernourished semantic web fan in my head a little sad. One of the goo* things about the AMP standard is it requires every article to contain a <link rel="canonical" href="..."/> tag that points back to the original article. This means if you’re using a traditional web browser that supports bookmarklets or extensions, it’s pretty easy to gin-up some code that will extract the canonical URL for a page and redirect you there.

If you’re on a desktop browser, just drag the below link to your bookmark bar.

To Canonical

If you’re on a mobile web browser, installing Bookmarklets is a little more complicated. You can find instructions all over the web for doing this — I’ll stay on-brand and point you towards this Stack Exchange post. Here’s a one line version of the bookmarklet to make that convoluted process a little easier for you.

javascript:var url = false;var links = document.getElementsByTagName(‘link’);Object.keys(links).forEach(function(key){if(links[key].rel !== ‘canonical’){return;};url = links[key].href;});if(!url){ alert(‘No Canonical URL’); };if(url){document.location = url;};

If you use this bookmarklet on a Google hosted AMP page, it will bring you can to the public web version of the AMP page. Touch it again and it’ll bring you to the desktop version of the page.

Unfortunately, as far as I know, there’s no way to access bookmarklets from the web view windows that mobile applications like Twitter or Tumblr use. I’ll have a bit more to say about that as this series continues, but for today let’s wrap up with a quick look at the javascript code that makes this bookmarklet tick.

//define a variable to hold the canonical URL
var url = false;

//grab all the link tags in the current page
var links = document.getElementsByTagName('link');

//loop through looking for a canonical link
//use the last one found
Object.keys(links).forEach(function(key){
    if(links[key].rel !== 'canonical'){
        return;
    };
    url = links[key].href;
});

//if we didn't find a URL, alert the url
if(!url){ 
    alert('No Canonical URL'); 
};

//if we did, redirect
if(url){
    document.location = url;
};

The first two links initialize some variables for us.

//define a variable to hold the canonical URL
var url = false;

//grab all the link tags in the current page
var links = document.getElementsByTagName('link');

The url variable will ultimately hold the canonical link we find. We’ve populated the link variable with an array like object containing all the link tags on the current page. Next

Object.keys(links).forEach(function(key){
    if(links[key].rel !== 'canonical'){
        return;
    };
    url = links[key].href;
});

we have code that loops over every element in the array of link tags. If we find one with a rel attribute, and that attribute has a value of canonical, we use that attribute’s href to populate the url variable.

Finally, once the loop’s complete we either tell the user that no canonical page was found

//if we didn't find a URL, alert the url
if(!url){ 
    alert('No Canonical URL'); 
};

or we redirect the user to the canonical page.

//if we did, redirect
if(url){
    document.location = url;
};

So, something useful (I hope) to kick-off this AMP series.