Preview and Generate Open Graph Meta Tags

Find out how Facebook and Twitter display your website!

Try: Clinicnearme.sg

Help Search Engines Understand Your Website

Meta tags are one of the most basic elements of HTML, it's a snippet of text used to describe the page. The HTML code hides the tags so you won't actually see it when you browse the page.

Social networks and messaging apps use theOpen Graph meta tags to display your website.

Well-Crafted Title and Description Boost Your Click-Through Rates

Title Tag

Title tag is an HTML element that specifies the title of a web page. Search engines display the title tag on the search result page.

Title tag is important for SEO and social sharing, you should use it to describe the content of the page.

Best practices: Keep your title under 60 characters.

<title>Product Hunt – The best new products in tech.</title>

Description Tag

Meta description is an HTML element that provides a brief summary of a web page. Search engines display the meta description on the search result page.

Best practice: Keep your description between 155 - 160 characters.

<meta name="description" content="Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about.">

What Do You Need To Know About Open Graph Meta Tags?

Facebook introduced Open Graph tags in 2010. The Open Graph protocols enable any web page to become a rich object in a social graph.

To turn your web pages into graph objects, you need to add the basic metadata to your webpage.

Open Graph tags allow you to take control over how your content should appear on Facebook.

Now, all the major platforms like Twitter and LinkedIn also recognize Open Graph tags.

Open Graph Markup Example


<meta property="og:title" content="Product Hunt – The best new products in tech."/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://api.url2png.com/v6/P5329C1FA0ECB6/790272390317dc724643b1ca88f5da6e/png/?url=https%3A%2F%2Fwww.producthunt.com%2F"/>
<meta property="og:description" content="Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone&#x27;s talking about."/>
<meta property="og:url" content="https://www.producthunt.com/"/>