Skip to content

HTML head and meta Tags: title, description, viewport, Open Graph, lang and dir="rtl"

Nothing in the <head> is shown on the page, yet it decides how the page looks on phones, what appears in Google results, what the preview card looks like when someone shares your link on WhatsApp, and whether an Arabic page reads in the right direction. For a site that serves both Arabic and English readers, these few lines matter as much as the content.

Quick answer

Every page needs <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, a unique <title> and a <meta name="description">. Arabic pages use <html lang="ar" dir="rtl">; mixed or user-typed text gets dir="auto". Open Graph tags such as og:title and og:image control share previews.

20 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Write a complete head for any page
  • Write titles and descriptions that earn clicks honestly
  • Build Arabic and bilingual pages that display correctly

The essentials

<meta charset="utf-8"> should be the first thing in the head, within the first 1024 bytes of the file, so the browser reads every character correctly, including Arabic. The viewport tag tells phones to use the real screen width instead of pretending to be a 980 pixel desktop; without it, your page shows tiny and zoomed out on mobile.

<title> is the page name on the browser tab, in bookmarks and usually as the clickable headline in search results. Make every title unique and specific: "Gratuity Calculator UAE: End of Service Benefits" says far more than "Home". Search engines may cut long titles, so put the important words first.

<meta name="description" content="..."> is a one or two sentence summary. Google often shows it under the title, though it can choose other text from the page. It does not raise rankings by itself, but a clear, honest description gets more of the right people to click.

Try it: A complete head
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

The domain alnoor.example is a reserved example domain; replace it with your own.

Canonical, languages and share previews

When the same page can be reached by several URLs (with tracking parameters, for example), <link rel="canonical" href="..."> tells search engines which one is the main address. For a site in two languages, hreflang links tell Google which page is the Arabic version and which is the English one, so each reader is shown the right one. Each language page should list all versions, including itself.

Open Graph tags (og:title, og:description, og:image, og:url) come from Facebook’s protocol and are read by WhatsApp, LinkedIn and many chat apps to build the preview card. A good og:image is a real picture of what the page offers, commonly 1200 by 630 pixels.

Arabic and right-to-left pages

Set the language and direction on the root: <html lang="ar" dir="rtl">. Do not fake RTL with text-align: right; dir also flips the order of columns, the side of list bullets and the position of the scroll bar in some browsers. Use lang="ar" even for Gulf dialect pages, or a regional code such as ar-AE if the content is specific to one country.

Inside an Arabic page, English words, phone numbers and code can appear in the wrong order around punctuation. Wrap a short piece in <bdi> or give an element dir="ltr" to isolate it. For text you do not control, such as a user’s name or a comment, use dir="auto": the browser picks the direction from the first strong letter.

Code always stays left to right, even on an Arabic page, which is why every code box in this course is set to dir="ltr".

Try it: An Arabic page with mixed text
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Delete dir="rtl" from the html tag and watch the bullets and text jump to the left.

Common mistakes

  • The same title on every page

    Fifty pages called "My Company" are impossible to tell apart in search results and tabs. Write a unique title that names each page’s topic.

  • Right-aligning instead of dir="rtl"

    text-align: right moves text but leaves punctuation, lists and layout in left-to-right order. Set dir="rtl" on the html element.

  • Missing viewport tag

    Without the viewport meta tag, phones render a zoomed-out desktop page. It is one line; add it to every page.

Exercise

Turn this into a correct Arabic page: lang="ar" and dir="rtl" on the html element, a charset, a viewport tag, a non-empty title and a meta description. Keep the phone number left to right with dir="ltr" or <bdi>.

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • lang="ar" and dir="rtl" on the html element
  • A charset meta tag
  • A viewport meta tag
  • A non-empty title
  • A meta description with content
  • The phone number is isolated left to right
Show one possible solution
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صالون الياسمين في دبي</title>
  <meta name="description" content="احجز موعدك في صالون الياسمين بدبي عبر الهاتف أو واتساب.">
</head>
<body>
  <h1>صالون الياسمين</h1>
  <p>للحجز: <bdi dir="ltr">+971 50 000 0000</bdi></p>
</body>
</html>

Quick quiz

  1. 1. What does the viewport meta tag fix?
  2. 2. Where should dir="rtl" go on an Arabic page?
  3. 3. Which tags control the preview when your link is shared on WhatsApp?
  4. 4. A comment box may receive Arabic or English. Which attribute helps?
Answer every question to check.

Finished the lesson?

Questions people ask

How long should a title tag be?

Google has no fixed limit and cuts titles by pixel width, so keep the key words in the first 50 to 60 characters. Longer titles are allowed; just make sure the start makes sense on its own.

Do meta keywords still matter?

No. Google has said publicly that it ignores the keywords meta tag. Spend the time on a better title, description and content.

Should the Arabic page have its own URL?

Yes. Google recommends a separate URL for each language version, such as /ar/ and /en/, rather than switching language with cookies on one URL, so each version can be found and linked with hreflang.

What is the difference between bdi and dir="ltr"?

<bdi> isolates text and guesses its direction, which suits names you do not know in advance. dir="ltr" on an element forces left to right, which suits code, phone numbers and URLs.

Do I need a favicon?

Browsers request /favicon.ico anyway, so add one to avoid errors in your logs and to make your tab recognisable. A single SVG icon plus a 180 pixel PNG for Apple devices covers most cases.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.