Optimizing your Website for SEO as a Web Developer

What does SEO mean?

The most popular acronym in the world of digital marketing is SEO (Search Engine Optimization).

As web developers, we are usually concerned with writing the code to create a website, making sure the code works, hosting our websites, and then maintaining the code for the website over time.

But why exactly do individuals or organizations strive to have a website?

The main purpose is to create an online presence and visibility for themselves on the internet.

It is the 21st century, everybody is using the internet. Nearly every company in the world currently has a presence on the internet, and so it just makes sense that if you want your website to be seen nationally or internationally and not just by people in your locality, you most definitely need a search-engine optimized online presence.

Let me take this down a notch.

A search engine is a software designed to carry out web searches based on the user's queries. The most popular one in the world today is Google. Of course, we have other search engines, such as Bing and Yahoo, but in this article, we are going to focus on Google.

Search Engine Optimization is simply the steps or the process taken to make sure that a website ranks highly in a search engine’s results. This means this website is most likely to appear among the top results on a Google search, for instance.

The Importance Of SEO for your Website

As stated earlier, having an online presence is an important step to take to make sure that you are visible to the millions of people in the world.

Nearly every business has a website and wants it to be discovered by people using the internet.

This is why digital marketers try their best to make sure that they implement SEO best practices into their websites. A website that has been optimized properly would most definitely stand a chance to rank more highly in the results of a Google search. As you would guess, the higher your website is ranked, the better for your website, as this will eventually lead to higher click-through rates and customer conversion.

Getting started with SEO

Optimizing your website to rank highly in Google search results takes a bunch of effort in different areas that, taken together, produces results for the site.

Search Engine Optimization can be implemented in two important ways:

1. The on-page SEO
2. The off-page SEO

On-page SEO:

On-page SEO are the steps you can take as a developer inside your website to make sure that your website is indexed by Google and ranks highly in its search results.

Off-page SEO:

Off-page SEO are the steps to take outside of your website to make sure that your website is visible to thousands of people and also high-ranking in a Google search.

Implementing SEO on a Website as a Developer

As a developer who is building a website, whether for a single client or for an organization, it is very important that you take the necessary steps that will ensure that in the long run, the website you are building can be found on Google and visible to the thousands of people who search for the product or service that website has to provide.

First of all, for a website to appear in the Google search results at all, Google needs to know that the website exists. If Google doesn’t know about the site, then no one can search for it on Google. Google has four steps through which a website can be ranked on a search.

There is a GoogleBot, otherwise called a crawler, that you can imagine as an ant crawling all over your apartment. Basically, this GoogleBot crawls through your website and reads all the information there. Based on the information on your site, Google is able to index your website properly. Think of this indexing like a supermarket— different aisles with different products. Google indexes your site based on on what it is about.

For example, say your website is about “cakes.” Google will index it as a cake website and then eventually it will be ranked among other websites about cakes. The ranking of your website is determined by a number of factors, which can be found here.

As a web developer, these are the necessary steps to take in order to make sure that your website stands a chance to rank more highly in the Google search results:

Create a Sitemap

A sitemap is a blueprint that contains a link to all of the other pages on your website that makes it easier for Google to crawl all of the different pages on your site and extract the necessary information. Say the website you are building is not just a one-page website and it contains a lot of other pages. Creating a sitemap makes it easy for Google to crawl each of the pages on your webpage so that they can be indexed.

Google finds and indexes websites through a number of ways, but it isn’t guaranteed that your website will be found. Creating and submitting a sitemap of your website to Google is the most reliable way for Google to find the site. Submit your sitemap on Google Search Console by creating an account.

You can create a sitemap using xml-sitemaps.

Content Layout

As web developers, we either create designs for our website by ourselves, or we work with a designer or a team of designers to create the design and then convert these designs to functional code.

When creating your website, think of Googlebot as a user as well. You want Googlebot to be able to crawl your website as easily as possible, and if your website design is difficult to navigate, it’s likely that your website will not be indexed by Google. If Googlebot has a hard time understanding how your website links together, your website will never be ranked in Google search results.

So, it is important to create a clean website, with a clean layout and proper navigation, not just for the user experience, but for Googlebot’s experience as well.

Take a look at the two images below:

Which website do you think Googlebot will crawl easily, allowing it to be indexed and ranked?

If you guessed the website on the right, then you’re definitely on the right track. Keep your website layout clean, user-friendly, and easy-to-navigate to improve its SEO.

Website Title

A website without a Title? I don’t think that exists. Every single website must have a title, just like every storybook has a name. When writing your HTML, you most definitely came across the title tag, which is usually nested inside the head tag. As a web developer who wants to optimize a website, please do not skip this tag.

The title is what shows up once a user searches for a particular keyword on Google. Below is a Google search for “jewelry shops.” You can see the first search result has the title of the website in blue text.

This is an example of how you should structure your website title. Make sure you include the appropriate keyword in your title; for example, in this instance, the most important keyword is “Jewelry”.

<!-- WEBSITE TITLE -->
<title>LAGOS Fine Jewelry | Designer Jewelry for Women</title>

Meta Tags

The meta tags help to define the metadata of a webpage. With metatags, we can provide additional important information about a website.

The meta tags usually have two attributes, the name and the content. As web developers, we can use the meta tags to specify different information about the website such as:

• Meta description
• Meta keywords
• Meta author
• Meta viewport

Google also uses the information provided to make sure that your website is properly indexed and ranked appropriately.

Meta Descriptions

The meta description briefly describes what the website has to offer. Google wants to make sure that it is providing the most valuable and useful information to the public, so it will scan for websites with the most catchy and appealing meta descriptions.

As you can see in the picture above, this website is an eCommerce website selling jewelry for women.

What do you think is the keyword for this website?

You guessed right, the keyword is “ jewelry” and you can see it has been used in the title as well as the meta description. The meta description is very straightforward, which has made Google rank it among the top searches for jewelry.

Learn how to write appealing meta descriptions here.

Meta Keywords

With the meta tag for implementing keywords, you have to state all the keywords you use on the page inside the content attribute of this meta tag. This will also help Google to rank your website more highly when these keywords are queried by a user.

<!-- META KEYWORDS -->
 <meta name="keywords" content="Skincare,shop,nigeria,skin,acne,facial,blemishes">

The code block above shows how your meta keywords should look. The code block is displaying the meta keywords for a skincare company in Nigeria; these are the keywords that may be in users’ queries when they are searching for skincare-related topics on Google.

Meta Author

This meta tag also helps with accessibility of a website as it clearly states the author of the content on the site. It’s most helpful for personal blogs and other sites where you need Google to access the author of that website. This is how you should add the meta author to your HTML File.

<!-- META AUTHOR -->
 <meta name="author" content="Queendoline Akpan">

Meta Viewport

The meta viewport is automatically generated in the HTML boilerplate for you, but it is always best to be sure that it’s there. We no longer view web pages only on desktop screens; we have a range of devices with different screen sizes.

A viewport is the visible area of a webpage on a screen. Meta viewport helps to scale the webpage to whatever screen size that webpage is being viewed on.

Google prioritizes websites available on many screen sizes, so if this tag is not included in your webpage, then improving your SEO might really be difficult.

<!-- META VIEWPORT -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Semantic HTML

If you’ve been a web developer for a while now, this should be a very familiar term. It’s best practice to use Semantic HTML when structuring your webpages.

Semantic HTML helps to make your website more accessible for users and search engines. They provide meaning to different sections of the webpage by giving them unique names. Some of the important Semantic HTML elements you should use include:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Use these semantic tags to structure the layout of your website, rather than just splashing divs all over your site. The more accessible your website is, the easier it is for Googlebot to crawl through your website. For more information about Semantic HTML, check out this guide.

Image and Link Descriptions

Just as Semantic HTML makes our site more easily accessible, properly describing what the images and links on your website are about will go a long way toward improving the SEO of your page.

Don’t be afraid to describe your images properly with alt attributes.

Don’t be afraid to use captions on your images to give them more context.

<figure>
 <img src="./images/facial-cleanser" alt="a facial cleanser to clear acne and tone the skin">
 <figcaption>Facial cleanser-to tone the skin and clear stubborn acne.</figcaption>
 </figure>

Above is an example of how you should structure your images. Only add captions if necessary, but always make sure to include text in your alt attributes to improve the accessibility of your site.

Using the anchor tag is almost inevitable in web development; therefore, you must write your anchor tags properly. Adding a title attribute creates a tooltip when the link is being hovered on. Sometimes the text of the anchor tag does not tell where that link takes the user, so adding a title attribute will help to eradicate this inconvenience not just for the user, but for Google as well.

<a href="./homepage" title="Skincare homepage">Home</a>

Website Speed

Have you ever clicked on a link to a website and it’s taken forever to load up, even with a fast network?

Annoying, right?

Nobody likes a slow website. If your website takes too long to load, most of the time users will click back out of the site. This is called a “bounce.” The higher the bounce rate on your website, the less likely that your content will be ranked highly in a Google search result, eventually leading to poor SEO.

Now the aim is to increase the dwell time of a user on your website. This basically means increase the amount of time a user spends on your website. The longer the dwell time, the better the SEO for your webpage. This can be achieved by building websites with great speed.

Key ways in which you can improve the speed of your website include:

• Compressing the size of your HTML, CSS, and Javascript files with minify code
• Server-side rendering: Javascript frameworks such as Next.js, built on React.js, and Nuxt.js, built on VueJS, support both client-side rendering and server-side rendering.
• Reduce the number of white spaces in your code
• Compress the size of your images with compress image

As stated earlier in this article, these are small steps you can take when building your website. They might seem like they are little and do not mean much at the moment, but at the end of the day when all these steps are put together, it makes such a huge difference to how well your page is ranked in Google search results.

As a web developer, remember the goal is to make sure that Google can crawl your website and index it properly so that it can be ranked. The goal is to also make sure that users stay and interact on your website for as long and as often as possible because this most definitely will create better SEO.