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