Login - Jit4All

Control how a page looks when shared in social and chat previews.

How does the head control shared link previews?

Open Graph meta tags tell sharing platforms the page title, description, image, URL, type, locale, and site name to use in preview cards.

After search and language setup, the page also needs to travel well when people share it.

A shared link often becomes a preview card. Without Open Graph tags, the platform guesses what title, image, and description to show.

Good Open Graph tags make shared links clear and professional.

The preview must match the real page. Do not use misleading titles or images.

<head>
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Jit HEAD">

  <meta property="og:title" content="Jit HEAD - Learn The HTML Head">

  <meta
    property="og:description"
    content="Learn how the HTML head controls search, sharing, icons, mobile setup, indexing, and AI previews.">

  <meta property="og:url" content="https://en.jit4all.com/learn/HEAD/">
  <meta property="og:image" content="https://en.jit4all.com/og-head.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Jit HEAD course preview card">
</head>

og:title sets the shared card title.

og:description sets the shared card summary.

og:image sets the preview image.

og:url should match the page's preferred URL.

og:image:alt describes the preview image.

The shared page looks intentional instead of random.

The title, image, and site name stay consistent.

People can understand the link before opening it.

Image alt text improves the meaning of the shared preview.

<title>Course</title>

Clear Open Graph setup

<meta property="og:title" content="Jit HEAD - Learn The HTML Head">
<meta property="og:description" content="Learn practical HTML head setup.">
<meta property="og:image" content="https://en.jit4all.com/og-head.png">

Ask ChatGPT: "Does this Open Graph preview accurately describe the page?" Then check the shared image, title, and URL yourself.

Add og:title to a page.

Add og:description.

Make sure the preview content matches the visible page.

Using a preview image that does not match the page.

Leaving the shared title vague.

Forgetting absolute URLs for preview images.

Using clickbait in preview metadata.

Forgetting image width, height, or alt text.

Add Open Graph tags that control how a page appears when shared in social and chat previews.