What is Open Graph Protocol (OGP)?
Open graph tags are meta tags that help reflect data such as titles, descriptions, and images when sharing web pages on social media. It was created for the first time by Facebook.
They are used with <meta> tags inside the <head> tag in HTML language.
Basic OGP Meta Tags
You can use open graph tags in the simplest way by placing the following 4 meta tags in the source code of the page. These 4 meta tags are required on all pages for the build to work.
og:typeSpecifies the type of page. (Article, video, author…)og:titleSpecifies the title of the page.og:imageSpecifies the cover image that describes the page.og:urlSpecifies the canonical URL that created the page.
Example
<meta property="og:type" content="article">
<meta property="og:title" content="Nikola Tesla Quotes - Words From Life">
<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg">
<meta property="og:url" content="https://wordsfromlife.com/en/nikola-tesla-quotes">Optional OGP Tags
The following meta tags are optional for the Open Graph Protocol but generally recommended.
og:audioIt is used to specify the URL of the audio file to be shared.og:videoIt is used to specify the URL of the video file to be shared.og:descriptionA description is used to describe the page, usually it pulls the same value as the meta description tag of the page.og:determinerIt is used for the word that will appear before the title of the page. Such as the prefixes “a”, “an” or “the” in English texts. It is blank by default.og:localeUsed to mark the local language of the page. Its default value is “en_US”.og:locale:alternateIt is used for the alternative locations of the page that are available. It can be used as an array for multiple alternate pages.og:site_nameUsed to specify the name of the website.
Configured OGP Features
Open Graph meta tags consist of property and content elements, some property elements have extra data;
og:image Extra Data
og:image:urlIt is exactly the same as og:image in terms of usage, it does not need to be reused.og:image:secure_urlHTTPS is used for the image URL, it is no longer needed as the vast majority of websites are HTTPS.og:image:typeIt is used to specify the file type of the image. (Example: image/png)og:image:widthIt is used to specify the width of the image.og:image:heightIt is used to specify the height of the image.og:image:altUsed for short description text describing the image. It is used as alternative text.
Example
<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:image:alt" content="Nikola Tesla Quotes" />og:video Extra Data
The og:video extra data is also valid with the same logic as og:image, except for its lower value, the same values can be used.
<meta property="og:video" content="" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video:width" content="" />
<meta property="og:video:height" content="" /> og:audio Extra Data
Only 3 properties are available for og:audio; The build works even if og:audio, og:audio, og:audio:secure_url, og:audio:type, og:audio:secure_url is not used.
<meta property="og:audio" content="" />
<meta property="og:audio:type" content="audio/mpeg" />og:type Object Types
With og:type it is necessary to specify the type of the page, there are different values according to the page types;
music.song
<meta property="og:type" content="music.song" /> Properties for type music.song;
music:durationThe length of the song in seconds.music:albumThe album of the song.music:album:discThe disc number where the song is on the album.music:album:trackThe number of which track the song is.music:musicianThe musician of the song.
Example
<meta property="og:type" content="music.song" />
<meta property="music:duration" content="236" />
<meta property="music:album" content="http://open.spotify.com/album/7rq68qYz66mNdPfidhIEFa" />
<meta property="music:album:disc" content="1" />
<meta property="music:album:track" content="2" />
<meta property="music:musician" content="http://open.spotify.com/artist/1dfeR4HaWDbWqFHLkxsg1d" />Source: