SEO Optimization in technical point of view: Meta Data Part II: Facebook Open Graph Protocol

Previously we talked about the very basic meta tags that should be included in every single page of your website.

Now let’s talk about meta tags that is mainly used for Facebook bot crawlers to identify the content of your page, which are Open Graph.

What are Open Graph Meta Tags

Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

All graph meta tags starts with og:

og:title

The title will be displayed in facebook share card

<meta property="og:title" content="Page Title">

og:description

<meta property="og:description" content="Page Description">

og:image

<meta property="og:image" content="https:://site-name.com/path-to-image">

The image path for your page/article…etc

og:type

<meta property="og:type" content="website">

Set the type of he page, i.e article | video.movie | website

List of available types can be found in this page

og:url

<meta property="og:url" content="https:://site-name.com/page-route">

Defines the Canonical URL of the page

A full separated article will cover the canonical urls.

Full Page Content

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- UTF8 -->
    <meta charset="UTF-8">
    <!-- Responsive Viewport Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page Title -->
    <title>Page Title</title>
    <!-- Meta description -->
    <meta name="description" content="your page description here">
    <!-- Meta Keywords -->
    <meta name="keywords" content="your,keywords,list,here">
    <!-- Meta Image -->
   <meta name="image" content="http://www.example.com/image.jpg">
    <!-- Open Graph Tags -->
    <!-- Title -->
    <meta property="og:title" content="Page Title">
    <!-- Description -->
    <meta property="og:description" content="Page Description">
    <!-- Image -->
    <meta property="og:image" content="https:://site-name.com/path-to-image">
    <!-- Type -->
    <meta property="og:type" content="website">
    <!-- URL -->
    <meta property="og:url" content="https:://site-name.com/page-route">

    <!--/ Open Graph Tags -->
</head>
<body>
    <!-- Page visible content -->
</body>
</html>

To Be Continued…

seo series1 - SEO Optimization in technical point of view: Meta Data Part I2 - SEO Optimization in technical point of view: Meta Data Part II: Facebook Open Graph Protocol3 - SEO Optimization in technical point of view: Meta Data Part III: Twitter Cards4 - SEO Optimization in technical point of view: Visible Content
SEO#SEO