Provide social network meta tags for website

0
1960
HTML

In order to provide better SEO for the web, you might need to put following meta tags into head part of your websites.

The first set of meta tags is for SEO, that includes following tags


<meta charset="utf-8">
<title>$TITLE$</title>
<meta name="description" content="$DESCRIPTION$">
<meta name="image" content="$IMAGE_URL$">

The second meta tag set is for Google Console,


<meta itemprop="name" content="$TITLE$">
<meta itemprop="description" content="$DESCRIPTION$">
<meta itemprop="image" content="$IMAGE_URL">

Next set is for Twitter, if you use this social network.


<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="$TITLE$">
<meta name="twitter:description" content="$DESCRIPTION$">
<meta name="twitter:site" content="@$TWITTER_ID$">
<meta name="twitter:creator" content="@$TWITTER_ID$">
<meta name="twitter:image:src" content="$IMAGE_URL$">

Last is to provide meta tag set for Facebook OpenGraph.


<meta name="og:title" content="$TITLE$">
<meta name="og:description" content="$DESCRIPTION$">
<meta name="og:image" content="$IMAGE_URL$">
<meta name="og:url" content="$WEBSITE_URL$">
<meta name="og:site_name" content="$SITE_NAME$">
<meta name="fb:admins" content="$FACEBOOK_ADMIN_ID$">
<meta name="og:type" content="website">

So basically, you will need to provide your website value into those variables between $ signs in above formats.

Look at my personal homepage as an example, here is the meta tag value provided for search engines and social networks:


<meta charset="utf-8">
<title>Pete Houston</title>
<meta name="description" content="Personal homepage of Pete Houston, a full-stack software engineer">
<meta name="image" content="https://petehouston.com/img/bg.jpg">

<meta itemprop="name" content="Pete Houston">
<meta itemprop="description" content="Personal homepage of Pete Houston, a full-stack software engineer">
<meta itemprop="image" content="https://petehouston.com/img/bg.jpg">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Pete Houston">
<meta name="twitter:description" content="Personal homepage of Pete Houston, a full-stack software engineer">
<meta name="twitter:site" content="@petehouston">
<meta name="twitter:creator" content="@petehouston">
<meta name="twitter:image:src" content="https://petehouston.com/img/bg.jpg">

<meta name="og:title" content="Pete Houston">
<meta name="og:description" content="Personal homepage of Pete Houston, a full-stack software engineer">
<meta name="og:image" content="https://petehouston.com/img/bg.jpg">
<meta name="og:url" content="https://petehouston.com">
<meta name="og:site_name" content="Pete Houston Homepage">
<meta name="fb:admins" content="100005927057168">
<meta name="og:type" content="website">

By providing those meta tags, your websites will be more visible for other to connect.