The open graph protocol enables you to control how your website's content appears across various social media platforms, such as Facebook, LinkedIn, and many more. By setting these open graph properties, you can entice users to want to click and engage with your content. You can set these properties through a collection of meta elements inside your HTML head section.
The first important OG property to include would be the title. Here is an example of setting the OG title for the freeCodeCamp homepage:
The next important OG property would be the type. Here is an example of using the OG type for the freeCodeCamp homepage:
The third important OG property would be the image. Here is an example of setting the OG image for the freeCodeCamp homepage:
The fourth important OG property would be the url. Here is an example of setting the OG url for the freeCodeCamp homepage:
There are many more OG properties that you can set, like description, audio, video and locale. However, the open graph url, image, type, and title are the most important ones to include.