Everything You Should Know About Connection Between SEO and HTML

You don’t need to be an HTML guru but should know essential SEO HTML tags and elements linked with optimisation. They will help you make content searchable by Google and other engines.

How to Use SEO for HTML Website

HTML is the standardised markup language for web documents. When a search engine comes across your content, it looks at your website’s HTML tags. This information helps search engines like Google categorise and evaluate your content.

Let’s review the main SEO HTML tips regarding tags and attributes to help users find your content.

The <title> Tag

Being responsible for the title in the search results, the <title> tag is one of the most important in search promotion. It helps search engines understand what the page is about and determine the relevance to user queries. The most important information in the title should fit in 60 characters.

SEO for HTML Website Meta Tags

In addition to the <title> tag, <head> contains tags of <meta> type, intended for browsers and search engines. The correct use of meta tags allows to increase the attractiveness of snippets and manage page indexing (you can also choose SEO auditing tools like splatjs.com). It ensures the correct display of the web pages to users.

Meta Description

Talking about SEO for HTML websites, a special role is given to Description meta tag. The information from this tag does not directly affect the ranking of the page. However, Google uses it to form descriptions in the snippet. Also, search engines take it into account to determine the relevance of the page content to the search query. A catchy description will help attract visitors to your site.

Meta robots

Robots help you specify the rules for indexing pages and links on them. The index value indicates that robots can index the page (otherwise, change the value to noindex). The follow value allows links to be indexed (otherwise use nofollow). If there are no meta robots, the page is open for indexing.

Meta Charset

The “charset” attribute indicates the encoding type of the document. Use it for browsers to correctly display the text of the page. Many browsers have learned to recognise the document encoding automatically, but it is still recommended to write a short string to avoid possible problems.

Meta Viewport

It tells the browser how to handle the page size and scale it to fit the device screen width. If this element is missing, mobile browsers use the desktop version by default and try to optimise it. It may result in a disproportionate look at the page content. Search engines consider such sites not adapted for mobile devices and lower it in the search results.

Meta Keywords

This meta tag should contain 5-7 keywords describing the main content of the page. Previously, it had a strong influence on the ranking, but it has lost its significance due to the actions of unscrupulous webmasters and the constant development of search engines. However, we still recommend using it.

SEO HTML Rules for Link Tags

The <head> block also contains <link> tags that link the document to other web pages. Consider the following attributes of the “link” tag: “canonical”, “next / prev”, “alternate”. You can also inform search engines about the mobile version of the site using the “media” attribute.

The “rel=”canonical”” Attribute

Use it to resolve issues with duplicate content: when the site has pages that are close or identical in content at different URLs. The attribute tells search engines which of the duplicate pages to index and show in search results. It also passes on the link juice and other characteristics of the duplicates.

The “rel=”alternate”” Attribute

Use this attribute to indicate alternative versions of the site’s pages, such as different language versions or the mobile version of the site. With its help, search engines choose which version of the page to show to a particular user in the search results.

SEO for HTML Website Content Optimisation

With text formatting, you can place accents and make it readable. Search engines recognise formatting tags and always prefer “convenient” texts. Content with a clear structure and markup is easier to perceive both by search robots and users. Errors in content markup can affect the validity of the code. The incorrect layout will distort the display of the page in a browser and may lead to misinterpretation of its content by engines.

Headings H1 – H6

There are many tags for decorating the text content. The most important is the H1-H6 heading tags, especially the main page title, H1. Along with <title>, this tag informs users and search robots about the content of a particular webpage. Heading tags often contain the main theses of the text and, having skimmed through them, the users understand whether they will read the text or not.

Conclusions

SEO website HTML tips imply basic knowledge of the HTML language. An SEO specialist (SEO for beginners also applies this) should focus on optimisation of tags from the <head> block, with the information for browsers and engines. It helps search engines understand what the page is about and how to interpret it. It is equally important to optimise tags and attributes located in the <body> since users see information from this block. The main thing is to understand how and why to use each tag and make content primarily for people, not for search robots.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Limit Text Length to X Lines Using CSS

In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS.

Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes.

There is a way, but it is webkit-only. However, when you combine this with line-height: X, and max-height: X*N, it will also work in other browsers, just without ellipses.

Let’s take the following HTML:-


<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

If we want to limit this so it only shows the first two lines of text we can do so by using the following CSS:-


.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 32px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

And there you have it, the text will now only show 2 lines of text regardless of how many lines it contains.

Where is this useful? Well, we recently used this when we had 3 columns displaying news posts and the heights of the boxes were varying heights because of the length of the title. In fact, we actually use this same method on our blog page.

We hope this helps, happy coding everyone!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Essential Tips to Build a Mobile Optimised Website

The web is increasingly moving towards mobile browsing, and this doesn’t seem to be slowing down. The number of people using mobile devices is increasing every day.

Here are a few tips that will help you build a website optimised for mobiles:

Select a responsive template for creating the website:

This is one of the most crucial aspects of building your website, as most users will visit the website through their smartphones. You can tackle this by partnering with companies offering responsive web design services as they have years of experience building mobile-first websites.

Choose the right web hosting:

Your web host needs to have an SSL certificate, and ideally, it should also provide cloud storage so that the users can view your website both on desktop and mobile devices without any hiccups along the way.

Prioritise your content requirement:

Elaborating your requirements through content is a fantastic thing, but only when provided on the website used on a big screen. But what for a mobile screen? With long-form content on mobile, you will lose users. It’s essential to prioritise your content and only provide what is necessary rather than posting everything.

Improve the website loading time:

The web hosting company should also provide you with a website speed test tool that will help you determine how fast your web pages are loading and where they’re taking time. You can improve the web page load times by using CDN or content delivery network services that distribute the web pages on multiple servers across different regions. These steps ensure that web pages load faster and provide users with a better web browsing experience.

Re-define website popups for mobile devices:

Popups are annoying on web browsers and should be avoided. However, if you want to use a popup for mobile devices, ensure that the website popup design is adjusted based on device type. Make it smaller in size, so it doesn’t cover all of the content above or below, impacting your web page rankings.

Optimise the images

Images are the reason behind slow web pages, which is a bad user experience. Ensure that images on the website are optimised and compressed as much as possible to reduce web page load time. Also, if the website is responsive, try to put in responsive images so that the web page can load quickly on any device.

Optimise CTA:

Ensure that the CTA (Call To Action) is small in size, minimally impacting the web page load time and the number of web pages that can be indexed by search engines like Google and Bing, etc. When it comes to CTAs on mobile devices, optimising the button’s size and considering how far apart each button is from the others and where they are located on the screen is essential.

Redesign your navigation menu

As web pages are getting shorter and the number of web pages that search engines can index has also reduced, it’s essential to ensure your navigation menu only shows what’s important. If there is no need for a web visitor to go anywhere else on your website other than where they already are, web designers should not include that web page in the navigation menu. It’s best to have no navigation and let your visitors get around by clicking on different headings if the website has only a few pages or only a few pages.

Test the design:

It’s essential to test the web page on different devices and browsers to ensure a great first impression for the visitors. Testing will help the senior web developer to identify and fix any issues with web page responsiveness or font rendering as soon as they appear.

Create a mobile app:

The market is developing every day, and so is the competition in the market. Web designers have the opportunity to create a mobile app or web-based software that can be launched simultaneously with your website so that you get a better chance of attracting potential customers and increasing sales conversions as well. Creating a mobile app with unique benefits that the website cannot provide attracts the users more and increases visits. Have a look at gb whatsapp, they are specialists in the creation of Whatsapp mod applications.

With web and mobile browsing becoming more and more popular, it’s essential to consider this when designing your website. To help you out with some tips for how you can optimise your site for mobiles, we’ve compiled a list of suggestions that will get you started on building an optimised website. Let us know if you need any other advice or talk about what type of strategies might work best in your industry!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Affiliate Marketing – Is it Still a Viable Source of Income?

There are many ways that you can make money online. The internet has given rise to eCommerce, and this in turn has paved the way for companies like Amazon. As a result, we now have things like affiliate marketing. Affiliate marketing is essentially where you get paid to promote and sell other company’s products.

For example, you can become an Amazon Associate. This means that you will provide links to various Amazon products on your website. When customers click on the link and make a qualifying purchase – you get a commission. But is this still a viable business plan and can you make money from affiliate marketing? Find out below.

Advantages of Affiliate Marketing

First, let’s look at the advantages of affiliate marketing. What makes it so popular? The following are some of the main advantages:

  • You don’t have to develop and sell your own products.
  • There is no shipping or delivery to organize.
  • Someone else essentially fronts the main business’s costs.
  • There is a vast range of affiliate platforms and products available.
  • Anyone can become an affiliate marketer with minimum experience.

As you can see, it is an accessible business model. Anyone can sign up to affiliate platforms and start promoting products on their website. Also, due to the event of simple website builders like Weebly and Wix, anyone can easily create a website.

Also, the main advantage is that you do not have to do anything other than research products and advertise them on your content. You don’t have to design and manufacture products. Nor do you have to deliver products or deal with customer feedback – you are essentially a third-party marketing tool for the business that actually makes the product.

Disadvantages of Affiliate Marketing

However, affiliate marketing does have its drawbacks as you can see below:

  • It is a highly competitive market with many other affiliate marketers.
  • Commission can often be low.
  • The commission is usually only based on qualifying product sales, not just clicks.

It is an incredibly competitive type of business – there are thousands of other people doing exactly the same thing. It also takes time to research the best products and to develop an SEO strategy to promote your website to hopefully earn an affiliate commission. You may also have to do additional promotions like creating business cards (You can use tools like Businesscards.co to do this) or social media campaigns.

So Can You Make Money Via Affiliate Marketing?

The short answer is yes. Affiliate marketing is still lucrative and there is certainly money to be made. However, you cannot expect to make a fortune overnight, with minimal effort.

Developing a successful affiliate portfolio and brand takes time and effort. Firstly, you must spend time developing a business website or blog where you can utilize affiliate links. This in itself is no small task.

Secondly, you must then promote your website or blog successfully to gain exposure. As a result, you may have to learn basic SEO, and how to optimize your web content for search engines like Google. This again takes time and effort, and you must be willing to learn new skills.

Lastly, you must also spend time researching products and develop strategies for your affiliate business. There are millions of potential products that you could promote – but which are suitable for your business? You must therefore be willing to spend time looking through platforms like Amazon, and finding out which products have the best potential to earn a commission.

So yes, it is perfectly possible to make money with affiliate marketing – but it may not be as simple as you may have initially thought!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Responsive Pinterest Style Layout With CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Start Learning HTML – A Beginners Guide

Being a computer programmer usually means that you can expect open job positions anytime while also sustaining your own tech-related needs sufficiently. Indeed, even knowing the basics of computer programming can get you places you never thought of before.

But there are other reasons to get started with computer programming and coding. For instance, learning HTML can help you easily build your own website from scratch. Hence, here’s how to start learning HTML even as a beginner.

What Is HTML and Why Do You Need It?

HTML stands for Hypertext Markup Language. To put it simply, it is a language used for writing websites and their web pages. HTML is somewhat like a backbone for websites making their pages functional and creating the structure of your website. In addition to HTML, you will need to use CSS (or Cascading Style Sheets). This is another language used for creating the visual look of your web pages.

Created in 1989, HTML was the invention of Tim Berners-Lee and Robert Cailliau among others. The latest version of HTML is HTML5. As you start learning HTML, you will likely realise that it isn’t as difficult as it may seem at first. It’s just a matter of building a strong foundation with basic HTML knowledge and then learning more about it as you go.

Organise Your Learning Process

Before you begin learning HTML, you should first think about organising your learning process. By having a schedule for your study sessions and considering all the learning materials you will be using, you will be able to get ready on time and organise yourself better. And, of course, by being organised, you will be able to manage your time much better, learning at a faster pace and getting other work done throughout the day swiftly.

In other words, organising your learning process will help you save a lot of time and effort while also streamlining your learning journey. After (or even before) you have chosen your courses and study materials, think about how often you can actually study. Aim for at least three to four hours a week and adjust your schedule accordingly. If you enrol on a course with a fixed schedule, you will also have to take this into account when making your schedule.

But how long will it take you to learn HTML properly? The good news is that you can grasp the basic elements of HTML in no more than a few hours. However, these are just the bare basics and no more than that. To truly understand HTML or even master its advanced elements, you will need to invest more time in learning theory and practising what you have learned. Practice is the keyword here – without it, you won’t be able to learn HTML properly.

Consider Other Things You Should Learn

As mentioned earlier, HTML is not the only thing you will need to use to create your website. There’s also CSS to think about because the two come together. As Veronica Hills professional essay writers review site puts it, “HTML lets you create the skeleton for your website while CSS builds on it creating the bones, the muscles, and everything else.”

Much like with HTML, CSS will require you a few hours to grasp the basics and then tons of practice to properly learn it. Luckily, many resources available to you for learning actually combine materials for HTML and CSS which means you can learn the two simultaneously. Alternatively, you can first seek out HTML resources and then move on to CSS once you are confident with using HTML.

Choose Your Learning Platform and Resources

So, how exactly can you start learning HTML? Well, you can buy a book, enrol in a university course… or you can start learning it yourself by finding relevant online courses or using online learning materials. Here are some options to consider:

  • W3Schools is a website that covers the basics of such languages as HTML, CSS, Python, JavaScript, and others. There are examples and interactive tests available absolutely for free.
  • freeCodeCamp is a free online course on HTML and CSS focusing on practice.
  • Udacity is an e-learning platform where you can find free HTML and CSS courses taught by an instructor who will explain all the basics to you.
  • Codecademy is one of the most popular platforms for learning HTML piece by piece and focusing on theory.
  • HTML.com is a website for beginners who want to learn HTML. It has step-by-step tutorials guiding you through the foundations of the language.

HTML Editors You Can Use

Last but not least, as you study HTML, you will need to use an HTML editor. As experts from the best websites with custom writing reviews say, “Never use word processors for writing HTML code. Instead, use an HTML editor. Test what you’ve written in different browsers to see how your work varies depending on the browser you use.” Here are some HTML editor options to check out:

  • Notepad++ is a very popular choice in the realm of HTML editors but it can also be used for other languages. It is a small program that offers the basic functions for you to write your code as clean as possible. It has a simple design preventing you from getting distracted and also has some plugin options for more functionality. In addition to that, it has a very handy autocomplete feature. However, Notepad++ isn’t supported by Mac computers and can be a bit difficult to get used to as a beginner.
  • Sublime Text 3 is another popular HTML editor which is both free and available for multiple platforms, including Windows, Mac, and Linux. The best thing about this HTML editor is that it is quite user-friendly and has a number of customisation options while also having a visually appealing interface to look at. On the other hand, there is no toolbar or dashboard and you can’t print code or documents.
  • Komodo Edit is another interesting option to check out. It is a free, open-source editor that supports multiple languages and offers different extensions. Komodo Edit is known for having a user-friendly interface and being supported on multiple platforms (Windows, Mac, Linux). That being said, there is no default autocompletion and some of the settings are hard to find and change.

Final Thoughts

All in all, learning HTML definitely has a variety of benefits, no matter what job you are performing or how you will be applying your HTML knowledge. Whether you want to be a computer programmer, or you are a small business owner looking to build your own website, learning HTML is the way to go.

That being said, as you set out on your learning journey, you will need to follow a number of best practices to be successful in your endeavour. Use the tips in this article to help you start learning HTML.

Frank Hamilton - Profile

Posted by: Frank Hamilton

Frank Hamilton is a blogger and translator from Manchester. He is a professional writing expert in such topics as blogging, digital marketing and self-education. He also loves traveling and speaks Spanish, French, German and English. Meet him on Facebook and Twitter.

 

It’s good to share

How to get the selected file name from an input type file using jQuery

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:-

So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.

You can use the jQuery’s change() method to get the file name selected by the HTML form control <input type="file" />. Let’s check out an example to understand how it works:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="file">
        <p><strong>Note:</strong> Choose any file on your computer and its name will be displayed in an alert dialog box.</p>
    </form>
</body>
</html>

In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-


    <div class="icon-add-file"></div>

So all we did was replace the alert with the following JS code:-


$('.filename').html(fileName);

// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);

Replacing the default file inputs

Okay, so you might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.


.file-wrapper {
    padding: 10px 20px;
    border: solid 2px #F8F8F8;
    background: #F8F8F8;
    color: #818586;
    max-width: 100%;
    outline: none;
    height: 150px;
    width: 100%;
    display: block;    
}

div.wpcf7 input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.icon-add-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-image: url(../img/icon-plus-symbol.png);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;    
}

.file-wrapper .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 150px;
    margin-top: -23px;
}

So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.

Well, we sure hope this helps, if you have any questions let us know and we’ll get back to you!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share