How To Auto Link KeyWords In Blogger With JavaScript

Internal Links

We have talked about internal linking in Blogger, before and it's important to manually link your keywords to pages, that you deem to be related. Doing so manually will avoid any punishment from Google that being said there is a handy JS library that's we have found that we believe would be helpful if you're wanting to link ultra-specific phrases that you keep constant across your website.

For instance let's say you write out the title of a post and link to it on your blog posts, this way you have strong anchor text that directly related to that post. Instead of manually adding it every time you write out a blog title you can do it manually.

I want to point out something very important about this script and library and that is that it affects every word that appears so if you choose to auto link the Word "SEO" every appearance of that word would be linked to the same page, therefore its important to only use the script to auto link to long tail keywords or phrases.

How To Begin

You will need to make sure your blog has one version of JQuery running on it this possible by viewing the template source or by viewing the source of your website if not adding it is fairly straightforward. Add the below code to the header of your blogger blog. 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

All that this does is load the latest version of the 1.x version of JQuery on your website you could try running a newer version but this one worked for us in testing. 

Next, we will want to use the link-it JQuery library. I went ahead and converted the code to function in Blogger you can add this code right above your closing </body> tag or in the header (it just needs to be after JQuery but before your rules). 

<script type='text/javascript'>
//<![CDATA[
if (typeof jQuery === 'undefined'){
    console.log('Link it requires jQuery to run');
}else{
    (function ($) {
        "use strict";
        $.fn.linkIt = function (options) {
            let settings = $.extend({
                linkColor: "#ff0000",
                linkClass: '',
                link: {
                    word :'',
                    url: '#'
                },
                linkTitle: '',
                newWindow: false,
                caseSensitive: false
            }, options);
            
            let str = $(this);
            let newLink = $('<a></a>');
            
            str.each(function (index, element) {
                let strHtml = $(this).html(),
                query = "\\b" + settings.link.word + "\\b",
                flags = settings.caseSensitive === true ? 'g' : 'gi',
                target = settings.newWindow === true ? '_blank"' : '_self',
                linkClass = settings.linkClass !== '' ? settings.linkClass : '',
                title = settings.linkTitle !== '' ? newLink.attr('title', settings.linkTitle) : '',
                regex = new RegExp(query, flags);

                newLink.attr('href',settings.link.url);
                newLink.attr('target', target);
                newLink.css('color',settings.linkColor);
                newLink.addClass(linkClass);
                newLink.text(settings.link.word);
                newLink = newLink.get(0).outerHTML;

                let result = strHtml.replace(regex, newLink);
                return $(this).html(result);
            });
        };
    }(jQuery));
}
//]]>
</script>

Now that you have the library I can now demonstrate how to write the rules to get the JS loaded to affect the keyword of your choosing I will also explain how to only target the article body of your website. 

So directly below that library, we are going to need to make another script tag which will read like the below line. 

<script type='text/javascript'>
//<![CDATA[
$('.post-body').linkIt({
    link: {
        word: 'SEO',
        url: 'https://seoknights.blogspot.com'
    }
});
//]]>
</script>

So the above code basically says that anything in the .post-body class (which is the default for a blogger article needs to have the word "SEO" linked to the given URL. You can change the word and the URL to whatever you want! 

You can also do long tail keywords or even use multiple keywords in the same script and I will show you how. 

<script type='text/javascript'>
//<![CDATA[
$('.post-body').linkIt({
    link: {
        word: 'SEO',
        url: 'https://seoknights.blogspot.com'
    }
      link: {
        word: "Blogger Rocks',
        url: 'https://google.com'
    }
});
//]]>
</script>

If you need to link multiple words or phrases just copy and paste the second link code that I have. You will now be able to auto link multiple keywords (long or short) in the same article in Blogger. 

While this can be incredibly helpful for SEO remember not to abuse this spamming internal links all to the same pages of the same phrase can get you into serious trouble with Google that being said, auto-linking long keyword phrases to pages on your website can seriously improve your internal link structure but also make your website better for users. 
How To Auto Link KeyWords In Blogger With JavaScript How To Auto Link KeyWords In Blogger With JavaScript Reviewed by Unknown on 10:48 AM Rating: 5

No comments:

Powered by Blogger.