Geek Culture
Published in

Geek Culture

Open Graph Tags in HTML 101

A HTML tag that the tutorial doesn’t tell you about

Why are Open Graph Tags Important?

As mentioned earlier, open graph meta tags are created to allow information easier to control on social media, like Facebook. In the marketing perspective, the open graph meta tags can have a massive impact on conversions and click-through rates.

How to Use Open Graph Tags?

Before we start, here’s a quick glance what your open graph tags need to include:

Credit: Neil Patel
<meta property="og:title" content="Apple rolls out CarPlay for safely using iPhones in the car" />
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />
<meta property=”og:description” content=”Apple has launched its Carplay...” />
  • article
  • blog
  • book
  • game
  • movie
  • city
  • country
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://www.yourdomain.com” />

Twitter Open Graph Tags

As for Twitter, it is called a “card”. Since we have to explore the main part of the open graph tags, I am going to be brief and give you the tag names as reference:

<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:title” content=”Your title here” />
<meta name=”twitter:description” content=”description here” />
<meta name=”twitter:url” content=”http://www.yourdomain.com” />
<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />

Open Graph Debugger

As a good developer, we always make sure everything works by using debugger. Open graph tags are no exception! Facebook created a Sharing Debugger specifically for Facebook (unfortunately — for me — you need to log in to be able to use the debugger), so as Twitter, and LinkedIn has one too!

From Twitter’s Card Validator

Meta Tag Generator

Before we go, I would like to share this tool I used that helped me generate the meta tags for my website. Sometimes it’s too much to type, it’s always helpful to have a tool to just copy and paste everything. Meta Tags would generate the open graph tags that you need for your URL. All you have to do is

Before You Go…

This is a relatively short and sweet article. I hope this is informative enough to get you started with open graph tags! I have linked some resources down below if you would like to learn more advanced open graph meta tags and happy coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store