SEO Optimization for HTML Websites

If you have a CMS, you probably have an add-on/plugin that does SEO optimization for you. This makes things much easier, but it also requires more maintenance and time for such a website.

However, if you have an HTML website and you didn’t do SEO optimization during its creation, it doesn’t exist. This means that you won’t appear on Google search, or you’ll be on a completely irrelevant page. Everyone’s goal is to be on the first page or to be the first result.

First, let’s debunk all the myths: Being the first with an HTML website is very difficult. It’s only possible if the website is very specific and the name of the site is also very specific. When a user types in that specificity in the search, you’ll come up first because there are no other websites with that term (like red flying donkey and redflyingdonkey.rs, for example). The reason why this is so limiting is simple: Google loves content, frequent updates, and lots of text, followed by images. This also applies to WordPress sites that consist of only one page or a few.

Is there any tool, person, or agency (expert) who deals with SEO optimization and can do it for me, guaranteeing me that first place, regardless of the cost?
NE.

Simply, SEO optimization cannot be guaranteed, and no one can guarantee it, not even Google employees themselves, as they have stated several times at various conferences. Google learns, changes its algorithm, and ranks websites on its own. There are many factors it considers when ranking sites, making it hard to predict.

OK, so how is it possible for some?

It’s simple: There are SEO optimization rules that must be followed, and by doing so, you increase your chances of being first or on the first page.

What you’ll see here and apply to your site are the basics that you must have on your site to increase your chances. Without these basics, your chances are almost non-existent and border on luck.

Meta Tags

<title>Title of 70 characters</title>
<meta name=”description” content=”Description of 200 characters”>
<meta name=”image” content=”https://yourwebsite/image.jpg”>

<meta itemprop=”name” content=”Title of 70 characters”>
<meta itemprop=”description” content=”Description of 200 characters”>
<meta itemprop=”image” content=”https://yourwebsite/image.jpg”>

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”Title of 70 characters”>
<meta name=”twitter:description” content=”Description of 200 characters”>
<meta name=”twitter:site” content=”@yourtwitter”>
<meta name=”twitter:creator” content=”@author”>
<meta name=”twitter:image:src” content=”https://yourwebsite/image.jpg”>

<meta name=”og:title” content=”Title of 70 characters”>
<meta name=”og:description” content=”Description of 200 characters”>
<meta name=”og:image” content=”https://yourwebsite/image.jpg”>
<meta name=”og:url” content=”https://yourwebsite”>
<meta name=”og:site_name” content=”Title of 70 characters”>
<meta name=”og:locale” content=”en_US”>
<meta name=”fb:admins” content=”#idfb”>
<meta name=”fb:app_id” content=”#APPID”>
<meta name=”og:type” content=”website”>

You can literally select all of this and copy it into your site’s code (of course, change the text, at the end of the article there will be an example with real text).

How to get to your site’s code or page to apply this?

cPanel > File Manager > public_html > index.html right-click on index.html and then click edit. If a popup appears, select utf-8 and click edit.

A new tab will open with a large code, but you only need the beginning for this. (index.html is the first page when you open your domain)

Place the code above in the <head></head> of your site. It literally says <head> with these arrows, and right below the head, enter the code above.

<html >
<head>
  <title>My Web Site Name</title>
 ...
 ...
</head>

Now that we’ve done that for index.html, you need to do it for all the pages on your site, for example: aboutus.html, contact.html, services.html, and so on.

<title>Jhone Bakery</title>
<meta name="description" content="Jhone Bakery, Street 1. The bakery's working hours are every day from 7 a.m. to 8 p.m. Orders can be made by phone at 123456789">
<meta name="image" content="https://bakerysite/image.jpg">
<meta itemprop="name" content="Jhone Bakery">
<meta itemprop="description" content="Jhone Bakery, Street 1. The bakery's working hours are every day from 7 a.m. to 8 p.m. Orders can be made by phone at 123456789">
<meta itemprop="image" content="https://bakerysite/image.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Jhone Bakery">
<meta name="twitter:description" content="Jhone Bakery, Street 1. The bakery's working hours are every day from 7 a.m. to 8 p.m. Orders can be made by phone at 123456789">
<meta name="twitter:site" content="@twitter">
<meta name="twitter:creator" content="@author">
<meta name="twitter:image:src" content="https://bakerysite/image.jpg">
<meta name="og:title" content="Jhone Bakery">
<meta name="og:description" content="Jhone Bakery, Street 1. The bakery's working hours are every day from 7 a.m. to 8 p.m. Orders can be made by phone at 123456789">
<meta name="og:image" content="https://bakerysite/image.jpg">
<meta name="og:url" content="https://bakerysite">
<meta name="og:site_name" content="Jhone Bakery">
<meta name="og:locale" content="en_US">
<meta name="fb:admins" content="#idfb">
<meta name="fb:app_id" content="#APPID">
<meta name="og:type" content="website">

The thing about Facebook here is the #idfb, which you can find using this site: https://randomtools.io/

The second thing is the APPID, which is actually more complicated for beginners, as you need to create a Facebook application and put the application id there.
The link is: https://developers.facebook.com/docs/apps/ Under “my Apps,” you have a button to create an application, enter the name, then click skip when it prompts you to choose a scenario, and you’ll immediately see the APP ID, but that’s not the end!

You really need that ID, and you’ll enter it in the code above instead of #APPID.

Enter all the information on that page and click to save. After that, you’ll see “Status: in development” in the top right corner and next to it, there’s an off button. Click on it. If everything is fine, it will turn green.

Can you do without this APPID?
You can. Realistically, you have a website even without SEO optimization, but every effort pays off.

The last thing you need to cover the basics of SEO optimization for HTML websites is a sitemap that is placed on the hosting, and the website itself is registered with Google. This is equally important as these meta tags. Instructions for this can be found in a separate article.

Scroll to Top