Jekyll SEO

In this post; we'll learn about some techniques used for improving the SEO of Jekyll websites.

Jekyll is a static site generator that takes a bunch of html and markdown files and generates a static site ready for hosting for free with GitHub pages, GitLab or using your own server (Cheap cost). Jekyll is by far the most popular static site generator out there.

Jekyll is blog aware which means that things such as posts, categories, permalinks are first class citizens so you don’t need to worry if you are intending to build your blog with Jekyll, It should be easy and straightforward.

Jekyll is all about static files which means there is no database and no need for security patches, your website is more secure and very fast(no time spent accessing database).

Unlike other blogging platforms Jekyll gives you a total control over your SEO.   If you are building a static website or a blog with Jekyll and you care about SEO (You should!) in this post I’ll try to show you how to deal with some important SEO tricks when using Jekyll.

URL redirection

URL redirection means redirecting an old url to a new url so you can tell browsers and search engines that some resource has moved to a new location. This is just one of the reasons, you can read this wikipedia article for other reasons why need URL redirection.

You can do url redirection using 301 redirect which means moved permanently to search engines but that’s only possible if you are in control of the web server. In case of a Jekyll website hosted with GitHub or GitLab you need to implement client side redirection 

To implement client side redirection you can use the Meta refresh tag which redirects the visitor to a new location after some controlled amount of time has passed.

    <meta http-equiv=”Refresh” content=”0; url=http://www.domain.com/newlocation" />

You can put the amount of time and the url to the new location in the content attribute separated by a semi-colon.

So how to do URL redirection the Jekyll way, you have two options either use a plugin or a layout.

Jekyll Redirect From Plugin

The Redirect From plugin allows you to do redirects and is white listed by GitHub so you can use it ith your GitHub pages,This is a GEM package so all you have to do is installing it from your terminal and start using it by adding either redirect_from or redirect_to in YAML FrontMatter of a post or page that you want to redirect from or to. For more information on how to use this plugin head over to its GitHub repo(https://github.com/jekyll/jekyll-redirect-from).

If you are not fan of plugins you can use a layout that redirects you using the Meta refresh tag

      <!DOCTYPE html>
      <html>
      <head>
      <link rel="canonical" href=""/>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta http-equiv="refresh" content="0;url=" />
      </head>
      <body>
          <h1>Redirecting...</h1>
            <a href="">Click here if you are not redirected.<a>
            <script>location=''</script>
      </body>
      </html>

Then you can add redirection from any post or page by extending the layout and specify the redirect_to parameter

      ---
      layout: redirected
      sitemap: false
      permalink: /oldlocation/
      redirect_to:  /newlocation/
      ---

You should put sitemap: false in the front matter so your redirected page won’t get included in your sitemap.

Link building, use rel= nofollow with external links

If you include external links in your website then a good seo measure you should be aware of is to specify rel=”nofollow” which tells search engines not to follow these links which preserves your page rank from being transmitted to these urls websites it’s also used to preserve you website authority if the external links you are pointing to are more than the backlinks you have (urls pointing to you)

So how to add rel=”nofollow” automatically to your external links 

You should install first Nokogiri a Ruby XML and HTML library

      gem install nokogiri
    require 'nokogiri'

    module Jekyll
      module ExtLinks
        # Access plugin config in _config.yml
        def config
          @context.registers[:site].config['extlinks']
        end

        # Checks if str contains any fragment of the fragments array
        def contains_any(str, fragments)
          return false unless Regexp.union(fragments) =~ str
          true
        end

        def extlinks(content)
          # Process configured link attributes and whitelisted hosts
          if config
            if config['attributes']
              attributes = Array(config['attributes'])
            end
            if config['rel_exclude']
              rel_exclude = Array(config['rel_exclude'])
            end
          end
          # Stop if no attributes were specified
          return content unless attributes

          doc = Nokogiri::HTML.parse(content)
          # Stop if we could't parse with HTML
          return content unless doc

          doc.css('a').each do |a|
            # If this is a local link don't change it
            next unless a.get_attribute('href') =~ /\Ahttp/i

            attributes.each do |attr, value|
              if attr.downcase == 'rel'
                # If there's a rel already don't change it
                next unless !a.get_attribute('rel') || a.get_attribute('rel').empty?
                # Skip whitelisted hosts for the 'rel' attribute
                next if rel_exclude && contains_any(a.get_attribute('href'), rel_exclude)
              end
              a.set_attribute(attr, value)
            end
          end

          doc.to_s
        end

      end
    end
Liquid::Template.register_filter(Jekyll::ExtLinks)
#Developed by Dmitry Ogarkov - #http://ogarkov.com/jekyll/plugins/extlinks/

To configure the plugin add this to your _config.yml


      # extlinks:
      #   attributes: {rel: nofollow, target: _blank}
      #   rel_exclude: ['host1.com', 'host2.net']
      Now you can use it in the layout 
      <div class="container">
    <div id="main-content" class="row main">


        <div class="mainheading col-xs-12 col-md-12">


            <!-- Post Title -->
            <h1 class="posttitle" style="color:#55acee;">Error:Buildtools 24.0.2 requires Java 1.8 or above. Current JDK version is 1.7 Under Ubuntu</h1>

        </div>
        <div id="content" class="col-xs-12 col-md-8 content">


            <!-- Post Featured Image -->


            <!-- End Featured Image -->


            <!-- Post Content -->

            <div class="article-post">
                <div style="margin: 10px;" id="share">

                </div>
                                <!-- Begin Mailchimp Signup Form -->


                                <!--<div id="mc_embed_signup">
    <form action="https://techiediaries.us17.list-manage.com/subscribe/post?u=444ae13ce2d2ced511cf9d19b&amp;id=dcd51aa7a0" method="post"
        id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
            <label for="mce-EMAIL">Get new Angular 7 tutorials</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
                <input type="text" name="b_444ae13ce2d2ced511cf9d19b_dcd51aa7a0" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
        </div>
    </form>
</div>-->

























                                <!--End mc_embed_signup-->

                <p>Rencently i&#39;ve started working with Android Studio instead of Eclipse for developing Android applications.As usual,when starting with a new development tool ,the installation process takes time and causes a lot of frustration to most developers .Anyway to work with the latest Android Studio you need to have Java 1.8 installed in your computer as recommended by Google on its Android studio website,if you just go with any version of Java,you have already, and ignore that recommendation, all is going to be fine until you create your first project you&#39;ll be welcomed with this error:</p>
<div class="highlight"><pre><code class="language-" data-lang="">&lt;b&gt;Error:Buildtools 24.0.2 requires Java 1.8 or above. Current JDK version is 1.7&lt;/b&gt;
</code></pre></div>
<p>So if you are encoutering the same problem and you are using Ubuntu feel free to follow my post on how to solve the probem.</p>

<p>First of all i&#39;ve installed the latest version of Java(1.8) using this PPA ppa:webupd8team/java.If you have a problem installing Java you can follow this detailed post on <a href="/2016-09-19-how-to-install-java-8-jdk-8u101-on-ubuntu-via-ppa">How to install Java 1.8 under Ubuntu 15</a></p>

<p>After installing Java 8 I started my Android Studio again and when i&#39;ve executed my newely created project i encoutered the same problem again .So what the hell is going on ? don&#39;t worry I have the solution here .</p>

<h2>Change your project settings to use Oracle Java 1.8 instead of Java 1.7</h2>

<p>This is very simple just hit F4 or Right Click on your project and choose module settings from the menu </p>

<p>Now all you have to do is changing</p>

<p>https://www.youtube.com/watch?v=MR49-iseQP0</p>


                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-format="autorelaxed"
                    data-ad-client="ca-pub-9293763250492023"
                    data-ad-slot="9249041598"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
                <!--<div class="privy-embed-form" data-campaign="681455"></div>-->


            </div>

            <!-- Post Date -->
            <p>
                <small>
                    <span class="post-date"><time class="post-date" datetime="2016-12-30">
                        30 Dec 2016</time></span>

                </small>
            </p>


            <!-- Post Categories -->
            <div class="after-post-tags">
                <ul class="tags">


                    <li>
                        <a href="/topics/java/">java</a>
                    </li>

                </ul>
            </div>
            <!-- End Categories -->
            <!-- Author Box -->

            <!-- Prev/Next -->
            <div class="row PageNavigation">

                <a class="btn btn-primary" href="/inkscape/drawing-trees-for-2d-games-with-inkscape/">&laquo; How to draw 2d trees for games with Inkscape</a>


                <a class="btn btn-primary" href="/jekyll/how-to-jekyll-like-a-pro-improving-seo/">Jekyll SEO &raquo;</a>

            </div>

            <hr />

        </div>
        <div class="col-xs-12 col-md-4 col-xs-offset-1">
            <div>


<h1 class="title-pen">
    <span>Author
        <span>
</h1>
<div class="user-profile">
    <img class="avatar" src="https://pbs.twimg.com/profile_images/950439106886152193/YnTy36qX_200x200.jpg"
        alt="Ash" />
    <div class="username">Team</div>
    <div class="bio">

    </div>
    <div class="description">
            Techiediaries is a website dedicated to bring you tutorials for the latest web technologies
    </div>
    <!--<ul class="data">
    <li>
          <a target="_blank" class="link-dark" href="">Website</a>
          <a target="_blank" href="https://twitter.com/techiediaries" class="btn follow">Follow</a>
    </li>
 </ul>-->
</div>




            </div>
            <div class="related-posts">
                <br>
                <h2 style="color:aliceblue; background-color:darkblue; padding: 10px;">RELATED TUTORIALS</h2>















































































    <a href="/java-httpclient-json-tutorial/">Java 11 HttpClient & Gson Tutorial: Send HTTP GET Requests and Parse JSON in a Single Source File Example</a>
    <hr style="color: blue;"/>












































































    <a href="/java-tutorial/">Java 11 Tutorial: Introduction & New Features</a>
    <hr style="color: blue;"/>































    <a href="/rest-api-spring-boot/">Spring Boot 2.2 with Java 11 REST API Tutorial: Using JPA Hibernate & MySQL</a>
    <hr style="color: blue;"/>































    <a href="/java-spring-boot-rest-api-tutorial/">Java 11 & Spring Boot 2.2 Tutorial: Build your First REST API App</a>
    <hr style="color: blue;"/>








































    <a href="/ubuntu-install-oracle-java/">How to Install Oracle JAVA 11 LTS and 12 on Ubuntu 19.04</a>
    <hr style="color: blue;"/>






















    <a href="/ubuntu-install-java-openjdk/">How to Install JAVA 8 (OpenJDK 8) on Ubuntu 19.04</a>
    <hr style="color: blue;"/>









































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































    <a href="/jakarta-ee-tutorial/">Jakarta EE Tutorial</a>
    <hr style="color: blue;"/>





            </div>

<!-- Ezoic - middlesidead - sidebar_middle -->
<div id="ezoic-pub-ad-placeholder-154"></div>
<!-- End Ezoic - middlesidead - sidebar_middle -->
<div>
                <div>
                    <br>

                    <a href="http://feeds.feedburner.com/techiediaries/AXID" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="https://cdn.pixabay.com/photo/2012/04/15/22/00/rss-35468_960_720.png" alt="" style="border:0"/></a><a href="http://feeds.feedburner.com/techiediaries/AXID" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe in a reader</a>









<script src="https://apis.google.com/js/platform.js"></script>



                </div>
                <div style="margin-top:10px;">
                </div>
                <!-- Ezoic - SidebarTop1 - sidebar -->
                <div style="margin-top:10px;" id="ezoic-pub-ad-placeholder-101">
                    <!--<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="ca-pub-9293763250492023"
                                 data-ad-slot="2757012795"
                                 data-ad-format="auto"
                                 data-full-width-responsive="true"></ins>
                            <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>-->
                </div>
                <!-- End Ezoic - SidebarTop1 - sidebar -->
                <!-- Ezoic - SidebarMiddle1 - sidebar_middle -->
                <div style="margin-top:10px;" id="ezoic-pub-ad-placeholder-103">
                    <!--<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="ca-pub-9293763250492023"
                                 data-ad-slot="9105165196"
                                 data-ad-format="auto"
                                 data-full-width-responsive="true"></ins>
                            <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>  -->
                </div>
                <!-- End Ezoic - SidebarMiddle1 - sidebar_middle -->                
                <div id="stickybar">

                    <div class="g-ytsubscribe" data-channelid="UCgQpmtmgBgYxn03Vcf6r7aQ" data-layout="full" data-count="hidden"></div>

                    <!-- Ezoic - long_sidebar_float - sidebar_floating_1 -->
                    <div id="ezoic-pub-ad-placeholder-149"></div>
                    <!-- End Ezoic - long_sidebar_float - sidebar_floating_1 -->
                </div>
            </div>
        </div>
        <!-- End Post -->

    </div>
</div>
<!-- End Article
================================================== -->



<!-- Begin Comments
================================================== -->
<div id="comments" class="row mb-5">
    <div class="col-md-8">
        <section class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = 'techiediaries'; 
        var disqus_developer = 0;
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = window.location.protocol + '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>


    </div>
</div>
<!--End Comments

================================================== -->

Cloacking External Links

Masking external links by using internal links so instead of going to www.example.com your visitor will visit first, for example www.yoursite.com/go/examplecom and then gets redirected to www.example.com. So how we can achieve URL cloaking or masking using Jekyll.

Conclusion

In this article, we've seen many techniques for improving the SEO of your Jekyll website.


comments powered by Disqus