Facebook Open Graph meta tags - examples
Social media sites must taking advantage of social meta tags.
The Open Graph protocol enables any web page to become a rich object in a social graph.
Adding Open Graph tags to your website won’t directly affect your SEO.
Facebook Open Graph
Facebook allow any web page to have the same functionality as any other object on Facebook.
Facebook Open Graph meta tags help to take control over how your content appears.
Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook.
Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.
Facebook Sharing Debugger
Facebook has created a tool called Sharing Debugger, wich has two very helpful functionalities:
-if you want to check link before it post: what the og:image looks like, what your description, title...
-also can it returns any errors report if it exsist and suggestions for og: tags
Link: Facebook Sharing Debugger
There are Basic Metadata in Open Graph that you must add to web pages, and they are:
og:title, og:description, og:image, and og:url.
Also, there are Optional Metadata you can use to provide even more in-depth specifications.
Example Facebook Open Graph meta tags
Basic Metadata
<meta property="og:title" content="The name of your site (55-60 characters).">
<meta property="og:description" content="A brief description of the content(150-155 characters).">
<meta property="og:image" content="URL that will be associated with your imag. Specify an image for a high quality preview in News Feed">
<meta property="og:url" content="This is the canonical URL for the page you are sharing">
<meta property="og:type" content="This defines type of content you are sharing (website, article,
blog, book, game, movie, food, city, country, company, actor, autor etc.)" />
Optional Metadata
<meta property="og:site_name" content="Its used to specify the name of your website."/>
<meta property="article:section" content="Displayed in the object specific section of preview." />
<meta property="og:locale" content="The locale these tags are marked up in. Default is en_US."/>
<meta property="og:locale:alternate" content="An array of other locales this where page is available in." />
<meta property="article:published_time" content="Calendars data">
Images Metadata
<meta property="og:image:width" content="Width of image in pixels or procents" />
<meta property="og:image:height" content="Height of image in pixels or procents" />
<meta property="og:image:type content="The media type for an image is always “image”, but this line also specifies the format used." />
<meta property="og:image:alt " content="A description of what is in the image." />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg"/>
Video Metadata
<meta property="og:video" content="The URL for the video. If you want the video to play in-line in News Feed, you should use the https:// URL if possible.";
<meta property="og:video:url" content="Equivalent to og:video";
<meta property="og:video:secure_url" content="Secure URL for the video. Include this even if you set the secure URL in og:video.";
<meta property="og:video:type" content="MIME type of the video. Either application/x-shockwave-flash or video/mp4. ";
<meta property="og:video:width" content="Width of video in pixels. This property is required for videos.";
<meta property="og:video:height" content="Height of video in pixels. This property is required for videos.";
Audio Metadata
<meta property="og:audio" content="A URL to a audio file that complements this object";
<meta property="og:audio:type" content="audio/mpeg"/>
<meta property="og:audio:secure_url" content="https://itpresent.com/web/html/audio/waltz.mp3" />
Admin Metadata
<meta property="article:publisher" content="https://www.facebook.com/It-present" />
<meta property="article:author" content="Markus M. " />
<meta property="fb:app_id" content="The App ID will allow Facebook to link your website
and generate a comprehensive overview of how users interact with your website and content."/>
<meta property="fb:pages" content="187*********" />
<meta property="fb:admins" content="Rade Miljanowich" />
<meta property="fb:app_id" content=" 11819137091******"/>
Example Facebook Open Graph meta tags for this website
Basic Metadata
<meta property="og:title" content="IT present">
<meta property="og:description" content="All about Software, Hardware, Web programming">
<meta property="og:image" content="https://itpresent.com/web/html/images/logo2.png">
<meta property="og:url" content="This is the canonical URL for the page you are sharing">
<meta property="og:type" content="This defines type of content you are sharing (website, article,
blog, book, game, movie, food, city, country, company, actor, autor etc.)" />
Optional Metadata
<meta property="og:site_name" content="IT present"/>
<meta property="og:url" content="https://itpresent.com">
<meta property="article:section" content="Software" />
<meta property="og:type" content="article" />
<meta property="article:author" content="Mark M." />
<meta property="og:locale" content="en_US". />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR"." />
<meta property="article:published_time" content="2020-04-25">
Images Metadata
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:type content="image/jpeg" />
<meta property="og:image:alt " content="IT present - LOGO" />
<meta property="og:image:secure_url" content="https://itpresent.com/web/html/images/logo2.png"/>
Video Metadata
<meta property="og:video" content="https://www.youtube.com/watch?v=6QZxrKG6jh4";
<meta property="og:video:url" content="https://www.youtube.com/watch?v=6QZxrKG6jh4";
<meta property="og:video:secure_url" content="https://www.youtube.com/watch?v=6QZxrKG6jh4";
<meta property="og:video:type" content="video/mp4. ";
<meta property="og:video:width" content="560";
<meta property="og:video:height" content="315";
Admin Metadata
<meta property="article:publisher" content="https://www.facebook.com/It-present" />
<meta property="article:author" content="Markus M. " />
<meta property="fb:pages" content="187*********" />
<meta property="fb:admins" content="Rade Miljanowich" />
<meta property="fb:app_id" content=" 11819137091******"/>
Facebook Open Graph meta tags options for copy/paste on web pages
<!---------------------Basic Metadata ------------------------>
<meta property="og:title" content=" ">
<meta property="og:description" content=" ">
<meta property="og:image" content=" ">
<meta property="og:type" content=" " />
<meta property="og:url" content=" ">
<!---------------------Optional Metadata --------------------------->
<meta property="og:type" content=" " />
<meta property="article:section" content=" " />
<meta property="og:url" content=" ">
<meta property="og:site_name" content=" "/>
<meta property="article:author" content=" " />
<meta property="og:locale" content=" " />
<meta property="og:locale:alternate" content=" "/>
<meta property="og:locale:alternate" content=" "/>
<
<!---------------------Images Metadata ------------------------>
<meta property="og:image:width" content=" " />
<meta property="og:image:height" content=" " />
<meta property="og:image:type content=" " />
<meta property="og:image:alt " content=" " />
<meta property="og:image:secure_url" content=" "/>
<!---------------------Video Metadata ------------------------>
<meta property="og:video" content=" ";
<meta property="og:video:url" content=" ";
<meta property="og:video:secure_url" content=" ";
<meta property="og:video:type" content=" ";
<meta property="og:video:width" content=" ";
<meta property="og:video:height" content=" ";
<meta property="og:image" content=" ";
<!---------------------Audio Metadata ------------------------>
<meta property="og:audio" content=" ";
< property="og:audio:secure_url" content="" />
< property="og:audio:type" content="audio/mpeg" />
<!---------------------FB Admin Metadata ------------------------>
<meta property="article:publisher" content=" " />
<meta property="fb:app_id" content=" "/>
<meta property="fb:pages" content=" " />
<meta property="fb:admins" content=" " />
