Meta tags and Open Graph

SEO tags with preview

No database: AIMRAN doesn't store your files, text or results

What is Meta tags and Open Graph?

Meta tags are invisible lines of code that tell Google and social networks how to display your page: the title, description and image that appear when someone searches for it or shares the link.

Fill in your page details and see how it will look in Google results and when shared on Facebook, LinkedIn or X. Then copy the HTML and paste it into your site.

How to use it

  1. Enter the title and description, keeping an eye on the character counter.
  2. Add the URL, image, site name and language.
  3. Choose the page type, the Twitter card and, optionally, the theme color.
  4. Check the Google and social sharing previews.
  5. Copy the HTML and paste it inside your page's <head>.

Advantages

Technical details

It generates <title>, meta description, link rel="canonical" and, optionally, theme-color. The Open Graph block includes og:type (website or article), og:title, og:description, og:url, og:image, og:site_name and og:locale, and adds og:image:width 1200 and og:image:height 630 when the large image card is chosen. The X/Twitter block includes twitter:card (summary or summary_large_image), twitter:title, twitter:description, twitter:image and twitter:site with the @ added automatically. All values are HTML-escaped and empty tags are omitted. The counters recommend titles of 30 to 60 characters and descriptions of 70 to 160, and the Google preview truncates at those limits.

Frequently asked questions

What are meta tags?

HTML tags placed in the page's <head> that describe its content to search engines and social networks. The most important are the title and the meta description.

How many characters should an SEO title have?

Roughly 30 to 60 characters, so Google shows it in full. The meta description, up to about 160.

What is Open Graph?

A protocol created by Facebook that defines which title, description and image are shown when a link is shared on networks like Facebook, LinkedIn or WhatsApp.

What size should the og:image be?

1200 × 630 pixels (1.91:1 ratio) is recommended so it looks large and sharp when shared.

What's the difference between summary and summary_large_image?

summary shows a small thumbnail next to the text; summary_large_image shows a large image above the title on X (Twitter).

More Developers tools