0xkojiWhen we put a link on LinkedIn, Facebook, Twitter and other social media platform, we will see a kind of card that has a title, a description and an image.
In this post, we will walk through the steps that need to show information and how to create meta tags quickly then learn what we need to do when we cannot see the entire information when we post a link to social media.
Recently most websites/web applications have meta information in their <head> tag like below.
The following is dev.to's head (I removed <link>, <script> and comments)
All we need to check is <meta> with property="og:xxxx"/"twitter:xxxx". They are required to show information.
og stands for open graph.
You can check details here.
These tags show the information which includes an image when we post a link to Facebook and LinkedIn.
For Twitter, we need to another type of tags. Most of information is similar to og properties, but there are a couple of differences between them.
Ex
<meta name="twitter:site" content="@thepracticaldev">
This tag's content is twitter handle name.
You can see more details here
<head>
<meta charset="utf-8">
<title>DEV Community 👩💻👨💻</title>
<meta name="last-updated" content="2021-08-06 19:00:29 UTC">
<meta name="user-signed-in" content="true">
<meta name="head-cached-at" content="1628276429">
<meta name="monetization" content="$ilp.uphold.com/24HhrUGG7ekn">
<meta name="environment" content="production">
<meta name="description" content="A constructive and inclusive social network for software developers. With you every step of your journey.">
<meta name="keywords" content="software development, engineering, rails, javascript, ruby">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dev.to/" />
<meta property="og:title" content="DEV Community" />
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png">
<meta property="og:description" content="A constructive and inclusive social network for software developers. With you every step of your journey." />
<meta property="og:site_name" content="DEV Community" />
<meta name="twitter:site" content="@thepracticaldev">
<meta name="twitter:title" content="DEV Community">
<meta name="twitter:description" content="A constructive and inclusive social network for software developers. With you every step of your journey.">
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-title" content="dev.to">
<meta name="application-name" content="dev.to">
<meta name="theme-color" content="#000000" />
<link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" />
<meta property="forem:name" content="DEV Community" />
<meta property="forem:logo" content="https://res.cloudinary.com/practicaldev/image/fetch/s--PFPhV65b--/c_limit,f_png,fl_progressive,q_80,w_512/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" />
<meta property="forem:domain" content="dev.to" />
</head>
So now we need to put meta tags on our website
, but write meta tags is kind of troublesome. Fortunately, there is a good website that generates tags from the min information such as an image, a title and a description.The site name is Meta Tags
https://metatags.io/
The following is a sample.
<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
image
In terms of an image, the most easiest way is to host the image you want to show on your server or anywhere everyone can access without any auth.
If you put the above tags on your website, ogp will show the information when you post the link to social media.
However, there would be a couple of case that don't show the information of the website correctly.
In this post, I will introduce a solution for LinkedIn.
steps for LinkedIn
Step 1: Visit https://www.linkedin.com/post-inspector/inspect/
Step 2: Check your site information
If displayed information is missing some, you will need to modify meta tags.
If there is no issue, you won't need to do anything.
Step3: Post a link to LinkedIn
This time LinkedIn will capture your website information from open graph protocol.
In terms of Twitter and Facebook, you can use these.
Twitter - Card validator
https://cards-dev.twitter.com/validator
Facebook - Sharing Debugger
https://developers.facebook.com/tools/debug/
