Lab 2: Using <meta> tags in Fish Creek Hospital's Website

Lab 2: Using <meta> tags in Fish Creek Hospital's Website

Introduction

In this example our client is Magda Patel, a veterinarian and owner of the Fish Creek Hospital. Her customers are local pet owners who range from children to senior citizens. Magda wanted a website to provide information to her current and potential customers.

To make Magda's website easy to find on the web by search engines <meta> tags were placed in the html code.

<head>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Fish Creek Hospital is a vet that make pets healthy again. It's run by the amazing Magda Patel.">
        <meta name="keywords" content="vet,pet,dog,cat,pet owner, fish creek, hospital">
        <meta name="author" content="Magda Patel">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
<title>Fish Creek Hospital: We make pets healthy again</title>
</head>
Meta tags used in Fish Creek Hospital

What are <meta> tags?

<meta> tags are stored in the <head> of a website. They are used to store information about a HTML document. This information about the site is read by computers, not people. These tags are used by browsers, search engines and other sites to describe how to display, reload and represent the site (e.g. as a search result on google).

Four different uses for <meta> tags

Keywords, description, author and viewport are all examples of meta data

<meta name="keywords" content="HTML,CSS,Javascript">

<meta name="description" content="Free Web tutorials for HTML and CSS">

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width, inital-scale=1.0">

The first 3 are useful to tell a search engine how to display the website and what keywords to match it to. The viewport tells the browser how to display the page to the user. <meta charset="//e.g utf-8"> matters, it's how information is sent but it's not of interest to SEO.

Show Comments