Build Open Graph Meta Tags The Right Way
Better Share Experience with Open Graph Tags
What are Meta Tags?
Meta tags are one of the most basic elements of HTML, it's a snippets of text used to describe the page. These tags are hidden in the code so you won't actually see it when you browse the page.
Meta tags helps search engines to understand your website is about. It also allows social networks or messaging apps to use these metadata tags and display your website visually.
Does Meta Tags Help SEO?
There're 2 meta tags that greatly affect your SEO ranking. Well crafted title and description could boost your CTR.
Title tag is a major factor that helps search engines and users understand what your page is all about.
Best practices: Keep your title under 60 characters.
<title>Product Hunt – The best new products in tech.</title>
Meta description is an HTML element that provides a brief summary of a web 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.">
Check out what Neil Patel got to say on meta tags (video)
What Do You Need To Know About Open Graph Meta Tags?
Facebook introduced Open Graph tags in 2010 to allow you to take control over how your content appears on Facebook.
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/"/>