[Edit]

HTML - OG tags required for article sharing

1 contributors

2 contributions

0 discussions

3 points

Created by:

Wiktor-Sribiew

830

In this article, we would like to show you how to use OG tags in HTML <head> element to be able share article metadata.

OG tags store the information about the webpage. They are useful when it comes to share the article link. Any application that supports OG Tags is able to display webpage preview when link is sent. Check the previews below to see how it works.

Exmaple preview

Edit

At this moment, many applications supports link previews, e.g. Facebook Messager, Google Chats, Microsoft Skype, Microsoft Teams, Facebook WhatsApp, etc., so it is worth to add it to own webpages also.

In the below, you can see Google Chat with generated link preview during conversation:

Example webpage with supported OG tags that was shared during conversion in Google Chat that is able to extract metadata. — Example webpage link (with supported OG tags) that was shared during conversion in Google Chat.

Example template

Edit

In this section we present a template of HTML5 web page containing OG tags.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <title>My article name - My website name</title>
  <meta name="description" content="My article description here..." />
  <meta name="keywords" content="keyword-1, keyword-2, keyword-3" />
  <link rel="canonical" href="https://my-domain.com/canonical/path/to/article" />
  
  <!-- Optional metadata for the website -->
  <meta property="og:site_name" content="My website name" />
  
  <!-- Required metadata for the article -->
  <meta property="og:url" content="https://my-domain.com/canonical/path/to/article" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="My article name" />
  <!-- Optional metadata for the article -->
  <meta property="og:description" content="My article description here..." />
​
  <!-- Required image for the article -->
  <meta property="og:image" content="https://my-domain.com/path/to/article/image.jpg" />
  <!-- Optional image for the article -->
  <meta property="og:image:width" content="600" />
  <meta property="og:image:height" content="400" />
​
  <!-- Non-standard hashtags/keywords for the article (with legacy versions) -->
  <meta property="og:tag" content="keyword-1" />
  <meta property="og:tag" content="keyword-2" />
  <meta property="og:tag" content="keyword-3" />
  <meta property="article:tag" content="keyword-1" />
  <meta property="article:tag" content="keyword-2" />
  <meta property="article:tag" content="keyword-3" />
  <meta property="og:article:tag" content="keyword-1" />
  <meta property="og:article:tag" content="keyword-2" />
  <meta property="og:article:tag" content="keyword-3" />
</head>
<body>
  <!-- Put webpage content here ... -->
</body>
</html>

Note:

In some cases it is required to keep the OG tags order. See the The Open Graph protocol for details.

Practical example

Edit

In this section, we present example OG tags from this article placed inside the <head> element of the HTML web page template to present the correct structure of the article that we want to share.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <title>❤ 💻 How to use optional chaining in JavaScript ES2020? - Dirask</title>
  <meta name="description" content="Why worry about undefined or null values..." />
  <meta name="keywords" content="programming, javascript, webdev" />
  <link rel="canonical" href="https://dirask.com/posts/D6BelD" />
  <meta property="og:site_name" content="Dirask.com, IT Community" />
  <meta property="og:url" content="https://dirask.com/posts/D6BelD" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="How to use optional chaining" />
  <meta property="og:description" content="Why worry about undefined or null values..." />
  <meta property="og:image" content="https://dirask.com/static/bucket/blog_posts/1615239313726_cover_image_D6BelD_w750px_h408px.jpg" />
  <meta property="og:image:width" content="750" />
  <meta property="og:image:height" content="408" />
  <meta property="og:tag" content="programming" />
  <meta property="og:tag" content="javascript" />
  <meta property="og:tag" content="webdev" />
  <meta property="article:tag" content="programming" />
  <meta property="article:tag" content="javascript" />
  <meta property="article:tag" content="webdev" />
  <meta property="og:article:tag" content="programming" />
  <meta property="og:article:tag" content="javascript" />
  <meta property="og:article:tag" content="webdev" />
</head>
<body>
  <!-- Put webpage content here ... -->
</body>
</html>