SEO and Web Pages | Front-end Development Tutorials

Learning Goals

At the end of this Tutorial you will be able to:

Use the title, description and h1 HTML tags to optimise the ranking of your web pages on Google and other search engines.

About SEO

Search engine optimisation (SEO) is a general term for techniques that organisations use to increase their website’s ‘findability’ on search engines such as Google and Microsoft Bing.

In practical terms, an easy-to-find website is one that ranks high in the search results displayed when people search for the type of the products or services the organisation or person offers.

For example, if you type the words web design sydney into the Google search engine website, you will see what is called a Search Engine Results Page (SERP) page.

A SERP begins with a number of paid ads and then lists the organic search results. See the example below.

Crawling, indexing and ranking

To optimise your website in search engine results, you need to understand the three steps of how search engines work:

Crawling: Google and other search engines continuously run software programs – called spiders or robots – that discover new web pages and content updates to existing ones.
Indexing: In the second step, the search engine adds the websites it finds to its index, which is in effect a parial copy of the Internet.
Ranking: In the final step, a search engine gives a ranking to each web page in its index based on about 200 different factors.

Web pages that rank well will appear among the first few results on the first SERP for a particular user search, such as pizza delivery sligo or refurbished laptops.

Research shows that the first organic result in a SERP has an average click-through rate (CTR) of 28.5%.

CTR rates falls sharply after position one, with the second and third ranked positions having a 15% and 11% click-through rate respectively. The tenth-ranking position has a much lower 2.5% click-through rate.

In this Tutorial, you will learn how you can use two meta tags of title and descriotion and the h1 tag to boost your ranking on search engine results pages (SERPs).

Search engines and SERPs

Follow the steps below to explore how the title and descriotion meta tags affect how your web pages appear in the SERPS of Google and other search engines.

Open a new tab in your web browser and in Google search enter the word Aldi.
Open another tab in your web browser and in Google search enter the word Lidl.
You should see the following two search results. Where does this text come from? Let’s find out.
In your web browser tabs, click on the link to each of the two supermarkets to display the home page of their website.
On each supermarket home web page, right-click anywhere on the page that is not an image and choose View Page Source from the context memu.
Press the Ctrl + F keys to search first for the word title to find the title tag and then the word description to find the description tag in the <head> of each web page.

You should see that the title and description tags provide the text that is displayed on the SERP for each supermarket.

SEO and the title tag

The content of the title tag is displayed at the top of the web browser window and when the web page is added to a user’s list of bookmarks/favourites.

Search engines use the title tag to understand the topic of the page and display it as a clickable headline in SERPs.

Your title tags should:

Include the keywords for which you want to be found in user searches
Include your brand name
Contain no more than 60 characters

The pipe character (|) is typically used to separate elements. You can see some examples below.

SEO and the description tag

This self-closing tag is where you write a summary description of your web page. Search engines use the description tag to understand the page amd to decide whether the topic it contains is relevant to the user’s search.

Your description tags should:

Include a Call to Action (CTA) such as 'Order now', 'Explore our range of...', 'Contact us today' or 'Get a quote'
For local businesses, your location and perhaps a telephone number
Contain about 160 characters. Some descriptions contain up to 200 characters, but there is no guarantee that Google will not truncate the final 30-40 characters.

Search engines display the description as a text snippet underneath the clickable page title. Descriptions influence the user's decision to click on the link or not (the click-through rate) so it is important to that they are clear, relevant and engaging.

Below are some example of title and description tags together.

SEO and the h1 tag

One of the most important HTML elements for (SEO) is the h1 tag because it helps search engines understand the structure and content of a webpage. Using the h1 tag effectively, you can improve your SEO ranking and make your content more discoverable for users.

Here are some tips on how to use the h1 tag effectively for better SEO:

Use only one h1 tag per webpage
Make the h1 tag relevant to the topic of the webpage
Include the main keyword or phrase that you are targeting
Position the h1 tag at or near the top of the page.

Updating your home page for SEO

You may wish to make a few changes to the current content of your website’s home page.

Begin with the two meta tags in the head of the web page.

Here are a few examples you may wish to follow:

<title>Mary Smith | Creative Digital Designer</title>
<meta name="description" content="Hi I'm Mary, a UI & UX designer based in Dublin. Mobile and Responsive Web Design, eCommerce Websites, Branding and Logo Design.">

<title>Mary Smith - Independent Web and Digital Developer</title>
<meta name="description" content="Freelance Web and Digital Developer crafting innovative online experiences on the web and social media.">

<title>Purple Pixels, Galway's premier web agency</title>
<meta name="description" content="We help new and growing businesses turn their ideas into attention-grabbing, customer-winning websites.">

Next, you may want update the text in the body of your home page.

Main heading: Typically, you will want to position your name or the name of your organisation as the top-level h1 heading. For example:
```
  <h1>Hi, I'm Mary Smith</h1>
```
```
	<h1>Purple Pixels Web Agency</h1>
```
Sub-heading: For your second-level h2 sub-heading, you will typically summarise your role or the products/services you offer.
```
   <h2>Web / UI Designer</h2>
```
```
	<h2>Digital Marketing for your business</h2>
```
Descriptive text: One or a few short paragaphs about you or your organisation. For example:
```
	<p>I created this website to showcase some of my recent web design work.</p> 
```

In VS Code, your complete index.html web page should now look something like the following.

And in your web browser, your home page should look similar to that below.

Avoid duplicate titles and descriptions

Each page on website should have a unique title, description and h1 tag. Duplicating these tags can confuse search engines and hurt your SEO ranking.

DO NOT use the same meta tags on different web pages of the same website.

This 'confuses' Google and other search engines.

"When two, or more, of your pages contain similar title tags, it falls upon the search engine to try to determine which page the user really wants to see in their results. What happens is that some of your pages will get preferred ranking status, while others get ignored completely. " Source.

Here are a few examples of different meta tags used on different web page.

Home page:

Portfolio page:

Contact page:

See the helpful links below for guidance on using the title and description meta tags on your web pages.

Meta tags: Further resources

What is a title tag?. From moz.com.

What is a meta description? From moz.com

Meta Tags for SEO: Definition, Examples, and Best Practices. From Neil Patel

Content Optimization Strategies: Meta Descriptions. From Brian Dean

Hiding a web page from search engines

Google and other search engines use software programs called spiders to crawl the web for web pages to add to their list of indexed web pages. Only web pages listed in such an index will appear in search engine results.

If you don't want a particular web page to be found by Google or other search engines, follow these steps:

Open your page-1.html and page-2.html web pages in VS Code.
In the <head> of each web page add the following new line:
```
<meta name="robots" content="noindex">
```
You can add this anywhere within the head. Typically, it is placed just after the charset line, as shown below.
When finished, save your web pages.

Uploading your web pages to GitHub

Your final task is to upload your three web pages to your account on GitHub.

Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
On your GitHub home page, click the name of the repository (‘repo’) that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 exercises sub-folder to upload them to your repository on GitHub. Note: Because your upload includes a folder and not just files, you must use the drag-and-drop method rather than the file select method.
Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
Finally, click the green Commit changes button to upload your entire exercises sub-folder and all the files it contains.

Your web pages are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/index.html
– or simply –
https://username.github.io
https://username.github.io/exercises/page-1.html
https://username.github.io/exercises/page-2.html

It may take a few minutes for your uploaded files to appear on GitHub.