Know and understand the function of metatags including to define the charset, keywords for search engines, the author of the web page, a description of the web page, the viewport (to make your web page display on all devices)

Published by Patrick Mutisya · 8 days ago

ICT 0417 – Website Authoring: Metatags

Website Authoring – Metatags

Metatags are placed inside the <head> section of an HTML document.

They do not affect the visible content of the page, but they provide information to browsers, search engines and other services.

Key Functions of Common Metatags

  • Charset definition – tells the browser which character encoding is used.

  • Keywords – a list of terms that describe the page’s content (used by some search engines).

  • Author – identifies the creator of the page.

  • Description – a short summary shown in search‑engine results.

  • Viewport – controls how the page is displayed on different devices, enabling responsive design.

Typical Metatag Syntax

<meta charset="UTF-8">
<meta name="keywords" content="ICT, website authoring, metatags, HTML">
<meta name="author" content="John Doe">
<meta name="description" content="A concise description of the web page for search engines.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Summary Table

MetatagAttribute(s)PurposeTypical \cdot alue
CharsetcharsetDefines the character encoding used by the document.UTF-8
Keywordsname="keywords" contentProvides search‑engine keywords describing the page.e.g., "ICT, web design, metatags"
Authorname="author" contentIdentifies the creator of the page.e.g., "Jane Smith"
Descriptionname="description" contentGives a brief summary for search‑engine snippets.e.g., "An introduction to metatags for IGCSE ICT."
Viewportname="viewport" contentControls layout on mobile devices; essential for responsive design.width=device-width, initial-scale=1.0

Why the \cdot iewport Metatag Is Crucial

Without a viewport definition, mobile browsers render pages at a virtual width (usually 980 px), causing text and images to appear tiny.

The viewport tag tells the browser to match the screen’s width and to set an initial zoom level, enabling the page to adapt to phones, tablets and desktops.

Suggested diagram: Illustration of a web page layout before and after applying the viewport meta tag, showing how the same HTML scales on a desktop monitor versus a smartphone screen.

Best Practices for Using Metatags

  1. Always declare the charset as the first meta element.

  2. Keep the description under 160 characters for optimal display in search results.

  3. Use relevant, specific keywords; avoid keyword stuffing.

  4. Update the author tag if the page is edited by a different person.

  5. Include the viewport tag on every page that should be mobile‑friendly.

Example of a Complete <head> Section

<head>
<meta charset="UTF-8">
<title>My IGCSE ICT Project</title>
<meta name="keywords" content="ICT, IGCSE, website authoring, metatags">
<meta name="author" content="Alex Johnson">
<meta name="description" content="A student project demonstrating the use of metatags in HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

By correctly applying these metatags, a web page becomes more accessible, searchable and responsive across all devices – essential skills for the Cambridge IGCSE ICT examination.