Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Open Graph is an Internet protocol originally created by Facebook to standardize the use of metadata in web pages, allowing social media to represent shared page content as rich “graphic” objects.

Reading this title, you might be wondering, what is The Open Graph Protocol? Why do we seem to see so little of it? What does it do? Indeed, The Open Graph Protocol is a relatively new concept to many front-end developments.

What is the Open Graph Protocol?

Open Graph Protocol, or OG Protocol. It is a Meta Information tagging protocol announced by Facebook at its 2010 F8 developer conference. It belongs to the category of Meta Tag, which is developed for social sharing. To standardize the use of metadata in web pages, allowing social media to represent shared page content as rich “graphical” objects. It allows other sites on Facebook to have as rich “graphical” objects as Facebook content, facilitating integration between Facebook and other sites.

In simple terms, this protocol is used to annotate the type of page and describe the content of the page. The inspiration comes from Dublin Core, Link-Rel Canonical, Microformats and RDFa, and while there are all these different technologies and patterns and they can be combined, none of them can provide enough information to represent any web page in a social graph in a rich way. The Open Graph protocol builds on these existing technologies, with simplicity for developers as the key goal, and provides developers with an implementation that informs many technology design decisions.

What is open Graph protocol?

For example, when we share a link (URL) to a friend, it is just a link in some apps, but in some apps, it can contain the title, picture, description and other information as shown in the picture below:

Social software, such as Feishu, WhatsApp, Twitter, Facebook and so on, will crawl the content of your given URL according to the link to determine which attributes to include for shared display. You can explicitly define attributes by including OG :tags in the header code of the page; Without this display-defined information, the social software will infer attributes after completing a page crawl for a given URL, and then use this attribute information to assemble a shared box for presentation.

In fact, all of this also depends on the implementation of the specific APP (whether the content will be captured according to the URL). For the same URL, we can see the different forms on Feishu and wechat:

WeChat:

Fly:

Why use the OG protocol?

We know that building content and maintaining websites can often be time consuming, and we certainly want our content to stand out when it comes to social sharing. Let’s take a look at the difference between parsing the same link with or without OG protocol:

Without the Open Graph protocol: The social software gets the title and description of the page correctly, but the information it contains is limited and doesn’t look attractive.

With open Graph protocol:

Content on the Internet usually has at least one goal – to share it with others. If you’re just sending it to a friend, it probably doesn’t matter if you have an open graph protocol. But if you want to run, share, or share it on any social network or app that has a rich preview, you want that preview to be as compelling as possible. Rich and effective information like the one below will help encourage people to click through to see your content.

What if your content doesn’t have open spectrum protocol tags? It may not matter to the content of the site, but your content will have a hard time standing out from the vast amount of other content on the Internet.

If a web page adopts the OG protocol, the sharing results will be presented in a structured manner, so that the site will have richer content when shared by links, and the conversion rate of the site will be improved.

How to add the OG protocol to a website

Basic properties

To turn your web page into a controllable structured graphic object, you need to add basic metadata to the page. The four basic open graphics tags are:

  • og:title– Specify the title you want to display when sharing. This is usually associated with your web page<title>The labels are the same, such as “Baidu, you know”.
  • og:type– Type of the object, for example, video.movie. Depending on the type you specify, you may need to add a few other different attributes.
  • og:image– An image URL.
  • og:url– Specify the URL you want to share/the URL of the current page (can be a short link), for example,”www.baidu.com/ “.

Each label control area is shown in the figure below:

When setting up an OG tag for a site, you should place it in the tag along with other metadata. Use the same
tag and add it as follows:

<meta property="" [NAME]" " content="" [VALUE]" " />
Copy the code

For example, here’s The Rock’s Open Graph protocol tag on IMDB:

<html prefix="og: https://ogp.me/ns#">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
    <meta
      property="og:image"
      content="https://ia.media-imdb.com/images/rock.jpg"
    />.</head>.</html>
Copy the code

Introduction to open graph labels

Basic metadata tags were introduced above, and some attributes are further explained below. If you want more information, go to Open Graph (ogp.me/) and read about it.

title

A maximum of 65 characters.

<title>your keyword rich title of the website and/or webpage</title>
Copy the code

description

A maximum of 155 characters.

<meta
  name="description"
  content="description of your website/webpage, make sure you use keywords!"
/>
Copy the code

og:title

A maximum of 35 characters.

<meta property="og:title" content="short title of your website/webpage" />
Copy the code

og:site_name

The name of the entire site on which your content is located. If your object is part of a larger web site, it should be the name of the entire web site.

og:url

Full link to current web page address.

<meta property="og:url" content="https://www.example.com/webpage/" />
Copy the code

og:description

Description of the page, up to 65 characters. Similar to og:title, this should normally be the same as the
tag on your site, although you can also make it different.

<meta property="og:description" content="description of your website/webpage" />
Copy the code

og:image

Images (JPG or PNG) with a minimum size of 300 x 200 with a size less than 300KB. This image should generally be provided via an HTTPS link with a valid non-self-signed certificate.

<meta
  property="og:image"
  content="//cdn.example.com/uploads/images/webpage_300x200.png"
/>
Copy the code

While it’s easy to add images using OG: Image, sometimes getting your images to display correctly can be challenging. Open graph agreement includes some of the image tag, such as og: image: urlvsog: image: secure_url and og: image: width and og: image: height, can be more detailed control of image.

Try to make sure you follow all the comments and examples in the open graphics document. In addition, some social networks may have special requirements for images. For example, Twitter requires a ratio of 2:1, a minimum size of 300×157 and a maximum size of 4096×4096, less than 5MB, in JPG, PNG, WEBP or GIF format.

og:video

The og: Video tag is the same as the OG: Image tag and is used to supplement the URL of the video file for the Graphics object.

og:type

To represent your object in a graph, you need to specify its type. Here is a full list of available types. You can also specify your own type.

<meta property="og:type" content="article" />
Copy the code

When setting up an open image TAB, you need to know which type makes sense for your site. If your page focuses on a single video, it might make sense to use the “video” type; If it’s a generic site without a specific vertical industry, you might be better off using the “website” type.

og:locale

The locale of the resource. If you have another language translation available, you can also use OG :locale:alternate. If og:locale is not specified, the default is en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
Copy the code

video/audio

You can also share audio/video. Facebook and Twitter, for example, share video well. Of course, WhatsApp also has this option, like when you share an Instagram or Youtube link, WhatsApp’s preview will play a video within the app.

Products, persons, movies, etc

Such information really depends on the provider (Facebook, Google), WhatsApp and Twitter can enable support for the product. This way, people you share links with may see prices, average ratings, reviews, and so on in the shared link “widget.”

favicon

For the best icon support for all browsers and devices, read this.

Twitter and other social media that use open diagrams

Most social networks follow the basic metadata tagging of the Open Graph protocol, and of course some social applications include their own extensions to help customize some of the look and feel of their ecosystem.

For example, Twitter allows you to specify Twitter :card, which is the type of “card” you can use when presenting your site. Their card types include:

  • summary
  • summary_large_image
  • app
  • player

This will help you choose how to use your links in their feeds. For example, if you use a summary_large_image, Twitter will show a link with a large high-resolution image as long as you provide the link in the OG :image tag.

To get the best Twitter support, read Twitter’s documentation.

To get the best Facebook support, read Facebook’s Sharing guidelines.

Here are links to documentation on how to use open image tags on certain social media sites for your reference:

  • Twitter
  • Facebook
  • Pinterest
  • LinkedIn

Test your open map TAB

If you’re having trouble developing your tags, you can also use some of the tools provided by social media to test and debug your tags:

  • Twitter
  • Facebook
  • Pinterest

Further explore open graph tags

While the above covers most of the tags a site might contain, there are a few that might help you and your business get more engaged and found throughout the social network. If you’re interested in digging deeper, The Official Open Graph Protocol documentation is a great guide to use.

If you’re just looking for a starter example, such as adding Settings tags to blog posts, you can use something like this:

<meta property="og:site_name" content="Colby Fayock" />
<meta
  property="og:title"
  content="Anyone Can Map! Inspiration and an
introduction to the world of mapping - Colby Fayock"
/>
<meta
  property="og:description"
  content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply They to the world of..."
/>
<meta
  property="og:url"
  content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/"
/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta
  property="og:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_- 60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map! % 20 inspiration % 20 and 20 an 20 to 20; % % % % 20 the % 20 world % 20 of % 20 mapping/blog - social - card - 1.1"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_- 60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map! % 20 inspiration % 20 and 20 an 20 to 20; % % % % 20 the % 20 world % 20 of % 20 mapping/blog - social - card - 1.1"
/>
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_- 60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map! % 20 inspiration % 20 and 20 an 20 to 20; % % % % 20 the % 20 world % 20 of % 20 mapping/blog - social - card - 1.1"
/>
<meta property="twitter:site" content="@colbyfayock" />
Copy the code

If you are looking for other ways to optimize and analyze your content, the following links may be of interest to you:

  • How do I add social media images to your Github project repository
  • How to understand Google Analytics and traffic to your site
  • How do I use Google Analytics to set up and track the performance of YouTube channels

Additional description of the OG protocol

A number of technical audits by different companies have shown that using the Open Graph tag won’t help you get better SEO rankings, and they’re only good for displaying rich “graphic” objects on social media.

The resources

  • The Open Graph protocol
  • What is Open Graph and how can I use it for my website?
  • Provide an image for WhatsApp link sharing
  • How to Customize which URL, Text and IMG to Share

This article was first published on my blog, welcome corrections and star.