I am having some difficulty implementing a solution that I found via my research here (the actual accepted answer is not helpful and has been downvoted to Bolivian).
Problem: Facebook doesn't seem to recognize the OpenGraph meta tags that I have added to my Header.
What I know (or think I know): It is my understanding that by adding some appropriate opengraph meta tags, the content, such as YouTube video, should appear in the body of the "post" on Facebook.
What I have tried so far: Referring to the solution linked above, I have tried to implement this method.
In my examples, I'm embedding this video
https://www.youtube.com/v/BQBjVr1iHH4 in the following page
https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 I
would like Facebook to show the YouTube video whenever anyone shares
my page on Facebook.
Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE
The meta tag will look like
<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />
Further, I have attempted to disable plugins which may conflict with this -- any plugins which appear to add OG meta tags.
On the code side: I have hard-coded the following meta tags in the Header (this will eventually become a PHP function or something, but not until/unless I can make it work on a single post):
<meta property='og:image' content='http://agnarchy.com/wp-content/uploads/2014/11/2014-11-01-22.02.37.jpg' />
<meta property='og:video' content='https://www.youtube.com/v/dt6pPdz5eqg' />
<meta property="og:video:height" content="854" />
<meta property="og:video:width" content="510" />
<meta property="og:type" content="video">
Observed behavior:
All I see is the post's featured image. When I schedule or submit this link to my facebook page, Facebook does not recognize the OpenGraph tags and does not render the embedded video as part of the content of this Facebook post:
Desired behavior:
This is at odds with the suggested method, which if I use the URL provided in that answer, I can see the embedded video player:
Related
"Unfurling is the technical term for what happens when you share a link on Twitter, Facebook, LinkedIn or Slack." (From the book: Designing Bots: Creating Conversational Experiences
By Amir Shevat)
What spec does the HTTP response body have to conform to in order to enable unfurling the link on the LinkedIn ?
Unfurling works by the app being able to read the meta tags in the HTML head of your document at the specified URL.
There are a few specs that most of the services you listed will use and/or fallback on, including og (opengraph) and twitter.
Your HTML head needs to contains something like this (for opengraph)
<meta property="og:url" content="your website url" />
<meta property="og:title" content="the title that shows up in the unfurled preview" />
<meta property="og:description" content="the description in the preview" />
<meta property="og:image" content="the url of the image you want to show in the preview" />
Note that if you are building an SPA or something that dynamically loads content based on route parameters, you'll need to do server side rendering or something that can serve the HTML statically, because the unfurl-er will not run the javascript that would add to the DOM.
There is also something called oEmbed that is a standard for sharing meta data with other services. This would be a server that responds with JSON about the links you post. Slack primarily relies on oEmbed but will fall back on og or twitter tags if it isn't available.
I'm having an issue with the thumbnail / featured image, headline and og meta not showing up if I paste a link in FB with one specific post but not others. (Flushing the cache on FB doesn't work).
The site's on WordPress and the Yoast SEO plug-in should sort out the OG meta tags if you correctly enter your FB settings in the right section and I believe I have. I have also just pasted the code in my theme's functions.php
Here is my most recent blog post where it has no image nor headline: http://robcubbon.com/essential-wordpress-plug-ins-website/
– however it works on other posts
On the Debug tool it says: Must: "The 'og:type' property is required, but not present". But it's there : <meta property="og:type" content="article" />
It also says: Should: "The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags." And it's there:
<meta property="og:url" content="link here" />
The OG Meta is exactly the same on this post (as far as I can see) as all other posts that have featured image and other meta info displaying properly in FB.
I would really appreciate if someone know why this is happening
I am implementing various meta tags within my site. Many are aimed at social networks such as Facebook and Twitter. To manage these tags easier I have grouped the related tags.
For instance:
<!-- DESCRIPTIONS -->
<meta name="description" content="Page description. No longer than 155 characters." />
<meta itemprop="description" content="This is the page description">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta property="og:description" content="Description Here" />
This will make it much quicker to insert the descriptions for each meta tag.
My question: Is there any reason Open Graph, Schema.org, Twitter Cards, or any other meta tags need to be:
grouped together and/or
be in a specific order?
Of course this assumes the meta tags are in the <head> of my site.
Most documentations don't mention a required or recommended order (Twitter, FB, OG).
According to this source the order matters for the Google+ button. I'm not sure if that is still true.
The order of the tags is not critical. But schema.org markup should be placed on the page itself, not in the head section with meta tags.
I build a new wordpress site and installed the Yoast SEO plugin.
My homepage defined as some of my pages.
When i post the link on facebook i can't see any description/title/image that i want
checked on - https://developers.facebook.com/tools/debug/og/object/
i got:
og:type article
(i think that In order to work should appear : website)
maybe someone knows Where I'm wrong?
Thank you!
Facebook uses OpenGraph, a protocol for which if no default values are defined (and you have no standard HTML <meta> values defined,) you can set certain properties so that your site will appear as you want it when you share it socially.
It should be noted that Opengraph will, by default, attempt to interpret these properties by their corresponding <meta> elements (stuff like <meta name="description" content="describe my site">).
If you don't have these, I suggest you add them, but the OpenGraph properties can be defined explicitly, too. The process for adding properties like this involve the use of the <meta> tag, typically in your header.php.
There are a lot of properties you can define
I think most pertinent to your situation would be:
<meta property="og:image" content="path/to/image">
<meta property="og:title" content="My cool website">
<meta property="og:description" content="Description of site">
These work for sites that use OpenGraph, but it's no substitute for having proper <meta> tags in the <head> of your document.
here's a bit of reading you can do on defining site meta
Hope this helps!
I am new to this. We have a wedding photography web site.
http://www.DawnKellyPhotography.com/fbshare/FBalbum/
I have used the Facebook developer page to generate the code to put on the put a Like button on each image's individual page, using the iframe method.
<iframe src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdawnkellyphotography.com%2Ffbshare%2FFBalbum%2F%3Fshow%3Dslides%2FNodownLoad.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:80px;' allowTransparency='true'></iframe>
I have also added the meta og tags to the image's html wrapper file.
<meta property="og:type" content="website">
<meta property="og:sitename" content="Dawn Kelly Photography">
<meta property="og:url" content="http://www.DawnKellyPhotography.com /fbshare/FBalbum/?show=slides/NodownLoad.html">
<meta property="og:image" content="http://www.DawnKellyPhotography.com/fbshare/FBalbum/slides/NodownLoad.jpg">
<meta property="og:title" content="Facebook Test Gallery">
I was expecting that the Like click would post the og:image and the og:url. Instead, just a link to the web site's base url is being posted along with the home page's image. The gallery is generated using JAlbum and a custom skin, and runs on the web site using a custom javascript. I have access to change any of these as needed.
Thanks in advance.
Any help will be appreciated.
You are missing og:image tags from your link you specified in your iframe.
Fix the warnings you have on the linter tool.
Inferred Property: The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The og:title property should be explicitly provided, even if a value can be inferred from other tags.
http://graph.facebook.com/10150531249004372
http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fdawnkellyphotography.com%2Ffbshare%2FFBalbum%2F%3Fshow%3Dslides%2FNodownLoad.html