HTML Meta Tags and Character Encoding - UTF-8 and SEO
So far, we have learned how to build everything the visitor sees on the page. But there is an entire section in every HTML page that visitors never see - inside <head>. This information is for browsers and search engines, and it directly affects how your site appears on Google and on mobile devices.
This lesson explains the most important of these hidden settings - <meta> tags.
What Is the <meta> Tag?
The <meta> tag is a special tag used only inside <head>, and it does not need a closing tag (like <br> and <img>). Its only job is to tell browsers and search engines information about the page.
1. Character Encoding - charset="UTF-8"
This is the most important meta tag of all. It tells the browser the "language" of the file - how characters are encoded. If this tag is missing, non-English characters may appear as "???" or strange symbols.
<!-- Yes: always place it first inside <head> -->
<meta charset="UTF-8">
UTF-8 is a universal encoding that supports all languages: Arabic, Hebrew, Chinese, Japanese, and emojis. Do not use any other encoding - UTF-8 is the global standard today.
<meta charset="UTF-8"> as the first thing inside <head>, even before <title>. The browser must know the encoding before it reads any text.
2. Viewport Tag - Make Your Site Work on Phones
Before smartphones, websites were designed only for large screens. When phones appeared, they displayed pages zoomed out to fit everything. The viewport tag solves this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag tells the browser:
width=device-width: make the page width equal to the device screen width (do not shrink it).initial-scale=1.0: do not zoom in or out on first load.
3. SEO Tags - How You Appear on Google
When you search on Google, each result has three parts:
- The blue title - comes from the
<title>tag - The green URL - the page link
- The gray text below - comes from
<meta name="description">
Here are the two basic SEO tags:
<!-- Page description - appears under the title in Google -->
<meta name="description" content="Learn HTML from scratch with DevArabi - simple explanations and free practical examples">
<!-- Keywords (less important now but still used) -->
<meta name="keywords" content="learn HTML, HTML course, HTML for beginners">
The description is very important - make it attractive because it helps decide whether the user clicks your site.
4. Other Useful meta Tags
| Tag | Use |
|---|---|
<meta name="author" content="Your Name"> |
Defines the author/creator of the page |
<meta name="robots" content="index, follow"> |
Tells Google to index the page and follow its links |
<meta name="robots" content="noindex"> |
Prevents Google from indexing the page (for private pages) |
<meta http-equiv="refresh" content="30"> |
Refreshes the page automatically every 30 seconds |
<meta property="og:title" content="..."> |
Title shown when sharing the page on Facebook/WhatsApp |
A Full HTML Page with Professional meta Tags
This is what the <head> section looks like in a professional site:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 1. Encoding - always first -->
<meta charset="UTF-8">
<!-- 2. Mobile compatibility -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. Page title (shows in browser tab and Google) -->
<title>Learn HTML from Scratch - DevArabi</title>
<!-- 4. Page description for Google -->
<meta name="description" content="Learn HTML from scratch with DevArabi. Simple explanation and free practical examples for beginners.">
<!-- 5. Keywords -->
<meta name="keywords" content="learn HTML, HTML course, HTML for beginners">
<!-- 6. Author -->
<meta name="author" content="DevArabi">
<!-- 7. CSS file -->
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
...
</body>
</html>
Frequently Asked Questions - FAQ
Do meta tags really affect my Google ranking?
charset, viewport, and description have a direct impact. The keywords tag is no longer used by Google for ranking, but it does not hurt. Good content and proper heading structure (<h1>, <h2>) are more important for SEO.
What is the difference between <title> and meta description?
<title> is the blue title in Google results and the browser tab. The meta description is the gray text below it in Google. Both matter - <title> is more important for SEO, and the description is more important for convincing the user to click.
How long should the description be?
Google usually shows around 150-160 characters. Keep your description in that range - clear, attractive, and with the main keyword near the beginning.