0% found this document useful (0 votes)
119 views10 pages

Basic SEO Practices for HTML Files

This document provides an introduction to basic SEO practices that can be applied to websites. It discusses optimizing page titles, headings, meta descriptions, URLs, and site navigation. Specific techniques are demonstrated like adding a title tag, heading tags of different sizes, and a description meta tag. Best practices are outlined for each element according to Google's recommendations to help websites rank higher in search engines.

Uploaded by

Aaron Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
119 views10 pages

Basic SEO Practices for HTML Files

This document provides an introduction to basic SEO practices that can be applied to websites. It discusses optimizing page titles, headings, meta descriptions, URLs, and site navigation. Specific techniques are demonstrated like adding a title tag, heading tags of different sizes, and a description meta tag. Best practices are outlined for each element according to Google's recommendations to help websites rank higher in search engines.

Uploaded by

Aaron Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

MODULE OF INSTRUCTION

Basic SEO Practices

In continuation of our discussion about Search Engine Optimization,


in this module we will explore some simple SEO practices that can be
applied to websites as prescribed by Google’s SEO Starter Guide.

Objectives:
08_Obj01: Identify the parts of a website that can be optimized
08_Obj02: Identify the steps in adding basic SEO to HTML Files
08_Obj03: Identify important terms related to SEO

For this lesson, we will use Hypertext Markup Language or HTML to


create simple files that can be opened by a web browser. These will
be offline files. Note that this module will not teach you to create a
functional commercial website.
To illustrate important points, we will use one example throughout
the lesson. Let’s say that we own and operate a website about
mountain climbing. Let’s call our fictional website [Link].

To start, let’s create a simple HTML file. Follow these steps.

1. Open Notepad or Textpad in your computer.


2. Enter the following text:
<html>
<head>
</head>
<body>
<h1>[Link]</h1>
<p>Welcome to our website</p>
</body>
</html>
3. Save your file. You can use any file name. Just make sure that
you add “.html” at the end of it. Doing so will save your text as
an HTML file
X.X

4. Double click your file to open it in your default web browser. It


should look like this:

We now have a basic HTML file. It may not look like much but it is the
correct format that can be added to a real website.

Page Title

For obvious reasons, Google gives a lot of attention to web page titles
so one of the first things that we should do is to create an effective
title for your web page. This is done by adding a title tag in your
HTML file. A title tag lets users and search engines read the topic of
your web page. If the web page appears in Google search results, the

2
MODULE OF INSTRUCTION

contents of the title tag will serve as the clickable link to your
website.

To add a title tag, paste the following text between the <head> tags in
your file like so:

<html>
<head>
<title>Mountaineering in the Philippines -
Locations, Gears Reviews, Online Store</title>
</head>
<body>
<h1>[Link]</h1>
<p>Welcome to our website</p>
</body>
</html>

Next, save the file and open it in a browser. The title text should
appear in the browser tab and when you hover your mouse pointer
over the tab.

Now for the SEO part. According to Google:

“The title for your homepage can list the name of your website/
business and could include other bits of important information like the
physical location of the business or maybe a few of its main focuses or
offerings”
X.X

In our website’s title we added the name of the website


Mountaineering in the Philippines and its 3 main functions Locations,
Gears Reviews, Online Store.

4
MODULE OF INSTRUCTION

Google recommends these best practices when adding a title to your


web pages:

 Accurately describe the page's content


 Create unique title tags for each page
 Use brief, but descriptive titles

Heading Tags
The contents of heading tags are larger than the normal text in the
web page. There are 6 sizes of heading tags from <h1> to <h6>.
Heading tags are used to display tiles, subtitles, and other important
texts in the web page. They can also be used in SEO because search
engine algorithms tend to pay more attention to texts in heading tags
than normal text.

To see the different sizes of heading tags, paste the following text
below the first <h1> tag in your file:

<html>
<body>
<h1>[Link]</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Welcome to our website</p>
</body>
</html>

Your web page should look like this:


X.X

Here are best practices recommended by Google:

 Imagine you're writing an outline


 Use headings sparingly across the page

Description Meta Tag


You can also add a description meta tag to each of your web pages. A
description meta tag gives search engines a summary of what the
page is about. It can be a sentence or a short paragraph. When your
web page is included in Google search results, the contents of the
description meta tag may appear as a snippet which can be seen
below the title.

To add a description meta tag, add this text below the title tag:

6
MODULE OF INSTRUCTION

<html>
<head>
<title>Mountaineering in the Philippines - Locations, Gears Reviews, Online
Store</title>
<meta name="description=" content="Everything you need to know about mountain
climbing in the Philippines. [Link] keeps you updated on events, news,
the latest gear and most popular locations.">
</head>
<body>
<h1>[Link]</h1>
<p>Welcome to our website</p>
</body>
</html>

Because it is a meta tag, it is not visible on the web page itself but it is
visible to search engines. Here are the best practices when adding a
description meta tag according to Google:
 Accurately summarize the page's content
 Use unique descriptions for each page

When adding a description meta tag, you should add words that are
most likely to be used by users as search keywords. According to
Google:
“Words in the snippet are bolded when they appear in the user's
query. This gives the user clues about whether the content on the
page matches with what he or she is looking for.”

Website URL
The Uniform Resource Locator or URL serves as the address of a web
page. Each web page in a website has a unique URL. The URL typically
displays the names of the folders and documents that make up the
web page.

For example, if the articles in your websites are named article1,


article2, article3, and so on and if they are located in a folder named
folder1, your URL’s may look like this:

[Link]

This URL does not give readers and search engines a very good idea
about the contents of the page. Instead of folder1 and article1, you
can use more descriptive names for your folders and files. This will
make your URL’s easier to read for both users and search engines.
Here’s an example:
X.X

[Link]

Just by reading the URL, users will already know what the page is
about. Furthermore, it could also lead to better crawling of your
documents by search engines.

8
MODULE OF INSTRUCTION

Site Navigation
A website is basically a collection of documents that is shared through
the Internet. Just like the documents in your computer, the pages in
your website have to be organized in a manner that is easy to
understand and navigate; not just for you but also for users and
search engines. Your web pages should be organized in a hierarchy
where the most important pages are the easiest to find.

Breadcrumb Lists

You can also make your website easier to navigate by adding a


breadcrumb list at the top or bottom of your page. Google defines a
breadcrumb list as “a row of internal links at the top or bottom of the
page that allows visitors to quickly navigate back to a previous section
or the root (home) page”

A breadcrumb link looks like this:

Homepage >> Product Reviews >> Best Hiking Shoes 2017 >> CAT Hiking Boots

Content
In 1996, Bill Gates wrote an essay that was published on the
Microsoft website. It was entitled Content is King and the first
paragraph reads:

“Content is where I expect much of the real money will be made on


the Internet, just as it was in broadcasting.”

“Content is king” has become a mantra in the field of SEO and online
marketing. There are many tricks that you can do to make your
website more attractive to users and search engines but at the end of
the day, the most powerful tools that you have are the contents that
you publish.

You may be able to boost your website’s popularity with effective SEO
practices but without quality content, your website will not be
popular for long. Your website should constantly give people data and
services that are informative, useful, and/or entertaining.

Glossary of Terms
X.X

TITLE TAG - It lets users and search engines read the topic of your web
page.

HEADING TAG - This is used to display tiles, subtitles, and other


important texts in the web page.

DESCRIPTION META TAG – It gives search engines a summary of what


the page is about.

UNIFORM RESOURCE LOCATOR – It serves as the address of a web


page

BREADCRUMB LIST - a row of internal links at the top or bottom of


the page that allows visitors to quickly navigate back to a previous
section or the root (home) page

Sources:

[Link]. (2014, July 11). “Content is King” – Bill Gates, 1996.


Retrieved October 09, 2017, from
[Link]
[Link]

Google. (n.d.). Search Engine Optimization Starter Guide. Retrieved


October 09, 2017, from
[Link]
webmasters/docs/[Link]

Kelly, R. (2016, October 19). How To Write a Header Tag (h1) for SEO.
Retrieved October 09, 2017, from
[Link]
for-seo/

10

You might also like