SEO made Easy

7 min readApr 6, 2020

Ahmed Khalil Bejaoui — https://abejaoui.com

First, What is SEO and Why we should apply it

S.E.O stands for Search Engine Optimisation

Search engine optimisation is very important for the success and availability of any online business or websites. Every webmaster should understand S.E.O, to generate a high traffic for all website types.

SEO is as much about people as it is about search engines themselves.

It is an art of understanding people, what they are searching for, what do they need, the words they’re using and type of content they’re seeking. Finding the answers to all of this will help you connect people to your website.

As the name mention, it is also understanding how Search engines like ‘Google, Bing, …’ works and index your web site over others.

If you are looking for high traffic to your website, a growing an audience and better availability just follow the basic and easy steps below.

Keep in mind that the content of this article is the result of a private research i made, and i wanted to share it with you.
I will talk about SEO ways and in the same time about how to speed the process of building/painting your website by the browser. Fixing issues related to speed will also affect your S.E.O score.
Any feedback, comments or other personal experiences are highly welcomed. So please share with us your knowledge or questions.

This article will mention:

Security
Meta tags and how to use them
Css tricks
Website media
Caching
Compressing
Sitemaps / robots
Google analytics
Blogging
Social media

S.E.O meets developers

Security

A secure website with a valid certificate issued from a valid source is mandatory. Nowadays getting a free certificate is easier than you expect.

Let's Encrypt - Free SSL/TLS Certificates

Let's Encrypt is a free, automated, and open certificate authority brought to you by the nonprofit Internet Security…

letsencrypt.org

Let’s Encrypt is a non profit certificate provider, if you use it, please show some gratitude by making a small donation.

2. Meta tags

Let’s start by the first thing anybody will see when he/she visit your website;

The title tag.

<head>
    <title>My Website</title>
</head>

Your title tag should be clear, descriptive and not more than 55 characters. It is always good to include a keyword in the title.

The description tag

<head>
    <meta name="description" content="Ahmed Khalil Bejaoui, senior full stack developer.....">
</head>

The meta description is the text that appears under the title when your website will be displayed in the result of the search engine. Adding some keywords to it, is highly encouraged. The description should be clear, descriptive, well spelled and not more than 150 characters.

The robot tag

<head>
    <meta name="robots" content="index, follow">
</head>

The robots tag is place in the head section under the description meta tag. If you don’t add a robots meta tag, the default for crawlers is to index and follow your page.

Have a look at this Google article for more details and how to use it.

The viewport tag

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

or more information about meta viewport have a look at this link.

3. Css tricks

I will mention one of the most important things to help the browser build and paint your website in a fast and performant way, which is the font swap .

Usually in websites, designers tends to use multiple types of fonts from different sources. While painting the web view by the browser will start loading the fonts which may take some time (a couple of seconds is too much, because it can block the browser from showing the content until it loads the fonts).

For this, we can use font-display: swap; The main function of this trick, is to instruct the browser to load the content until the fonts are available to be applied.

4. Website Media

Developers, or designers tend to use png, jpg or jpeg as a media type for their web site. Some of the images can reach 5MB of size, which makes painting the view is really slow, which will affect you and your audience.

To fix this issue, you need to think about changing the type of your images to one of the following types: JPEG2000, JPEG XR or WebP .

“JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.”

For more informations about it, have fun while reading this Google Article. For tools to convert your medias, try this very cool online converter.

5. Caching

Please use nginx server caching for the following reasons:

Huge traffic with dynamic content
News website with a lot of static content and a lot of traffic

Don’t use it when:

You have a small/medium website size
Low to none website traffic
Personal websites

Also one of the most important things to do is to cache static media content, for that you can just add this as an example to your nginx config.

expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";

You can find more information about this in nginx or apache documentation online.

If you are using other technology to serve your content, just make a search for static media content cache in the documentation page of your technology.

6. Compressing

Compression allows your web server to provide smaller file sizes which load faster for your website users.

To enable that, i will post here a type of configuration you may use with nginx

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

For more information please check this link.

screen capture from Network section in Google Chrome

7. Sitemap / robots.txt

“A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to more intelligently crawl your site. A sitemap tells Google which pages and files you think are important in your site, and also provides valuable information about these files: for example, for pages, when the page was last updated, how often the page is changed, and any alternate language versions of a page.” read more…

As an example check apple.com/sitemap.xml

To generate a site map you can use xml-sitemaps.

They provide tools for sitemap validation and simulation of how they are seen and processed by search engine robots.

Robots.txt

“A robots.txt file lives at the root of your site. So, for site www.example.com, the robots.txt file lives at www.example.com/robots.txt. robots.txt is a plain text file that follows the Robots Exclusion Standard. A robots.txt file consists of one or more rules. Each rule blocks (or or allows) access for a given crawler to a specified file path in that website.” read more…

You can read, test, and validate your robots.txt file using the link above.

8. Google analytics

Google analytics is an amazing tools to help you understand how users are behaving when visiting you website. Which content/links are attracting more than others, which are the fired event, how many and when and many more other functionalities.

How to use Google analytics and best practices, will be publish in the next article. I will update this section when is available to read.

The best thing about all of this, is that Google Analytics is free to use.

9. Blogging

Writing Blog, Articles about you web site, product or business, is always an eye catcher. Having multiple sources, talking about your website will help by getting a high traffic, and will send a message to the search engines saying: ‘Hey i’m famous, crawl me, respect me, people knows me now.’

10. Social Media

After publishing your website, sharing it in your environment by social media like facebook, twitter, Linkedin, Github, youtube, instagram, … is always a fast high way to get more eyes looking at it. Share your product/message and use it as an experiment to understand the behaviour of your first users on Google analytics, also to get feedback about UX, Bugs, Links, content, media, and many more comments.

Finally, have a look at Google Console, for more information regarding