While hosting your site or blog with GitHub pages is quite useful in terms of saving time and money, there are certain limitations too, such as not being in control of the webserver which is serving your website. Usually redirects are recommended to be setup on the webserver, however if your site is hosted with GitHub pages, you don’t have that option. In this post, we will see how we can do client side redirects instead, using meta tags in HTML pages.
Understanding URL redirects
URL redirection allows you to map an existing url to a new URL in order to notify the browser and search engines of a page that has been moved to a new location. There are many other reasons for which you may need a URL redirect.
Server side redirects
Generally the URL redirection is done using a 301 redirect (Moved permanently) on the server side. For e.g. a 301 redirect on a apache server would be done as follows:
Redirect permanent /oldlocation http://www.domain.com/newlocationClient side redirects using Meta refresh tag
There are multiple ways of doing a client side redirect such as using a JavaScript code. However, the widely accepted way is using the Meta Refresh tag. This meta tag sends the user to a new URL after a certain amount of time, and is used as a simple form of redirection when a server side redirect is not possible. This meta tag looks as shown below and is added to the <head> section of a HTML page.
<meta http-equiv="Refresh" content="0; url=http://www.domain.com/newlocation" />How to redirect URL in Jekyll Site on GitHub Pages?
Since the server side redirect is not possible when you are hosting your Jekyll site on GitHub Pages we have to resort to a client side redirect using the Meta refresh technique. We can do this using one of the two options below.
1. JekyllRedirectFrom Plugin
There are very few plugins which are whitelisted by GitHub pages, and JekyllRedirectFrom plugin is one of them. JekyllRedirectFrom can be used to setup multiple redirects for a URL on jekyll sites.
All you need to do is add the jekyll-redirect-from gem to your jekyll project and add a redirect_from in the YAML front matter of post or a page to specify the older locations from which the current location is mapping to. Similary a redirect_to can be used to map the current location to a new location. The redirect_to can be handy when redirecting to external domains. Complete installation and usage instructions are available at the plugins GitHub page.
2. Utilizing a Redirected Layout
This second technique would allow you to set up redirects for your pages without resorting to any plugin. All you need to do is create a layout named redirected.html in your _layouts folder. The content of this layout would be as shown below:
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="{{ page.redirect_to }}"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />
</head>
<body>
<h1>Redirecting...</h1>
<a href="{{ page.redirect_to }}">Click here if you are not redirected.<a>
<script>location='{{ page.redirect_to }}'</script>
</body>
</html>Once you have this layout ready, then to set up redirect from any page, all you need to do is specify redirected as your layout in its YAML front matter and specify the destination in redirect_to as shown below.
---
layout: redirected
sitemap: false
permalink: /oldlocation/
redirect_to: /newlocation/
---Note that, I have also included sitemap: false in the front matter as I don’t want the redirected pages to be included in the sitemap.
Search Engines and Meta Refresh tags
As I mentioned earlier, using a server side 301 redirect is a much better option and supported by all search engines. But what about redirects using a meta refresh tag for redirect? Is that search engine friendly?
The answer is Yes. While Google doesn’t recommend its use, it has listed the meta refresh tag in its list of supported meta tags. Also, as per my own experience, the pages I redirected using the meta refresh technique got updated to the new URL in Google Search results in a few days.
Hi!
And how you solve the duplication issue in any post loop? I tried using “published: false” at front matter but it did’nt work
I did this:
add at YAML
—
category: redirected
—
then at loop wrap it with an empty if to exclude this category
{% for post in site.posts %}
{% if post.category == “redirected” %}
{% else if %}
//YOUR LOOP
{% endif %}
{% endfor %}