I am doing my best to understand what everything means in the Open Graph Protocol Reading the FB page on it and the OGP Page. What exactly does this mean in the world of FB and OGP:
Note that the Open Graph protocol is currently designed to support
real-life objects. If your URL is a piece of content — such as a news
article, photo, video, or similar — you should set og:type to article
(see below). Pages of type article do not have publishing rights, and
will not show up on user's profiles because they are not real world
objects
What exactly does Pages of type article do not have publishing rights, and will not show up on user's profiles I think I understand the publishing rights but what exacly does not show on the user;s profile? The user profile part is what I do not understand.
The purpose of posting responses to people's questions is the help them, not to be condescending. If you aren't going to try to be helpful, don't post.
<!-- This is what it means to set the og:type to article -->
<meta property="og:type" content="article" />
That is not "what it means" to set the og:type to article, it is merely an example of code showing the syntax for using the article type.
Clearly #Lynda is trying to understand the caveats of using article as the OG type, and for obvious reasons: the documentation does not offer a lot of best practice advice about which type to use, especially when you are adding a LIKE button to a single page of regular content (for example, an "About Us" page, or FAQs page) on a website.
The question is perfectly legitimate, if not expressed with the clarity of crystal.
If the "LIKE" (action) of a type = article web page object is not going to "show up on the user's profile", what good is the article type?
Sure, the answer is probably simple, something like "the article will show up on the user's timeline", but whatever the answer, it is not easily clear to those of us who are in the process of gaining an initial understanding of the Open Graph protocol.
#Lynda's question can really be reframed as follows: "What are the consequences of using the article type, and when should I really use it?"
Furthermore, the documentation also says:
Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.
When trying to determine what type to use for a specific webpage that does not represent a real world object (like a movie), a page like an "About Us" page doesn't seem to qualify as "transient content", it does not represent the entire website, and it's not a blog or blog entry. So what type should be used?
I have searched high and low for a solid 24 hours and have yet to find any clarification on this beyond the two quoted pieces of developer documentation, yet it seems a simple question that content developers must face everyday now that we recognize the importance of feeding the Open Graph.
Should a web page with non-transient content that does not represent a real world object be tagged as "article", or not? The Facebook documentation essentially says no, but does not offer any obvious alternative.
And, to come back to #Lynda's question, where does a LIKED "article" web page appear on Facebook in relation to the user who did the liking? On their timeline? Anywhere else? This is also not made clear anywhere that I can find.
Sincerely,
Fritz
If for example you have a website for movies and on every movie page you include a <meta property="og:type" content="movie" /> and a Like Button then every time a user clicks con the Like Button he/she will include that movie in his/her Facebook Profile under Info/Movies.
So his/her friends will see that he liked that movie every time they review his/her profile (in addition to the message that gets posted to the wall saying "User X liked movie Y on site Z").
This is not the case with articles, only real world objects.
More information: http://developers.facebook.com/docs/opengraph/ and http://ogp.me/
P.S. Don't forget to include the other required properties og:title, og:image and og:url.
The "type" is just an Open Graph <meta> tag you set in a page's <head>:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
<meta property="og:title" content="Some example page" />
<!-- This is what it means to set the og:type to article -->
<meta property="og:type" content="article" />
<meta property="og:url"
content="http://example.com/canonical/url/to/this/content" />
<!-- etc -->
</head>
<body>
<!-- snip -->
</body>
</html>
Lots more reading: https://developers.facebook.com/docs/beta/opengraph/
Related
We have been sharing our website pages and articles to LinkedIn for almost 4 years using
https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/page1/
Until recently, the share block would appear with an image, caption and summary. Just as in Facebook. But now, we find that the summary does not show. I know many have raised this same concern here. One solution I saw in this forum is to switch to forcing visitors to sign into our LinkedIn app and post the status via REST API. My question is, Is this really necessary. We don't have a login feature for our website and to force people to login to LinkedIn app just to show description which is already part of the og tags on the page. Surely someone from LinkedIn can respond to this issue since so many have raised it.
You can use Post Inspector (https://www.linkedin.com/post-inspector/) to preview how your posts will be shared on LinkedIn.
Alternatively, you can use the Share Plugin (https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin) to add a widget for users to easily share content on LinkedIn.
Just take a quick look at the Official LinkedIn "Making Your Website Shareable on LinkedIn" Documentation. I will bold areas of particular interest:
If you're the developer of your website, you'll need to make sure the source code complies with Open Graph Protocol (OGP) and certain image requirements specific to LinkedIn....
Below are the og: tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
And the requirements...
Here are the image requirements specific to the LinkedIn sharing module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
So, if you want to make sure your image displays correctly in the LinkedIn share functionality, make sure your webpage has the following...
<html>
<head>
<meta property="og:image" content="someweburl.jpg" />
</head>
...
</html>
Hope this helps!
I'm not sure if this is new behaviour or if it didn't work at all.
So I'm using the LinkedIn Customized URL feature, you can look it up here. The URL looks like this:
https://www.linkedin.com/shareArticle?mini=true&url=http://developer.linkedin.com&title=LinkedIn%20Developer%20Network&summary=My%20favorite%20developer%20program&source=LinkedIn
Once I share the URL the provided summary is not shown in the post preview:
So I tried with other services like Youtube, Reddit etc. and all posts do not include the provided summary.
Unfortunately I can't provide you the open-graph tags I used on my site as it's running in a corporate environment and I'm not sure if I can provide these snippets as of now.
However, running linkedin's Post Inspector shows that it detects my summary without problems:
Values are in German if anyone wonders...
So my quick and fairly simple questions, which might be answered in a comment as well, are:
Did linkedin change something on their side?
Is there some other undocumented property which neither youtube nor me included in the customized URL and therefore the summary does not show up?
Is there any post from linkedin developers which note this change?
Was it like that all the time or is it just a temporary thing?
Main Problem People are Experiencing: You cannot display BOTH an image and a description. You may only use one. Indicating an OG tag for image means your description will not display. Source: Arguing with LinkedIn Support for 2 Weeks.
LinkedIn only supports one parameter in their share content now:
https://www.linkedin.com/sharing/share-offsite/?url={url}
Source: Microsoft LinkedIn Share URL Documentation.
If you want to specify title and summary, then you need the og tags, but these are things LinkedIn associates with the URL, and it doesn't populate in the message body.
Otherwise, this works for me:
https://www.linkedin.com/sharing/share-offsite/?url=http://www.wikipedia.org/
Works fine:
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs
LinkedIn now uses the Open Graph tags to show the preview.
Below are the og:tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
And the sharing url is changed to:
https://www.linkedin.com/sharing/share-offsite/?url=your_encoded_url
Please see this Making Your Website Shareable on LinkedIn
I have found links to this page, but it does not supply the information I need:
https://developers.facebook.com/docs/opengraph/#types
What are the possible types?
The type for an og:type property can be anything you want it to be, as long as you have an Open Graph Story set up in your application. When you are setting up your story, you will be asked to provide an action, such as "cook", "eat", "walk", etc, and an object, such as "food", "dessert", or "route". That object is incorporated into the "type" that you provide in your open graph tags.
For example, if my app, DessertTaster, had an open graph story:
{user} tasted this dessert
The verb (action) is "taste", and the object is "dessert", and the corresponding og:type tag is:
<meta property="og:type" content="desserttaster:dessert" />
If you developed an app that used one of the default stories (and this is encouraged by facebook), then you might have an og story pair that had an action news.reads with object article.
<meta property="og:type" content="article" />
In that case, no app namespace is required.
There is a link in the Facebook Developers Sharing Guide for Webmasters to the List of Types, which are:
music.song
music.album
music.playlist
music.radio_station
video.movie
video.episode
video.tv_show
video.other
article
book
profile
website
We are making use of the FB Like/Share functionality on various pages for our client's site(s). On each page we want shared, we add the following in the meta tags:
<head id="ctl00_Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- social sharing metadata -->
<meta property="og:title" content="Our Site Title" />
<meta property="og:description" content="A description to be used in the share dialog." />
<meta property="og:image" content="http://us.oursite.com/images/FB_ShareThumbnail_US.png" />
<title>Our Page Title</title>
<!-- favicon -->
<!-- stylesheet and js links -->
<!-- inline js -->
</head>
In addition, we also display a Facebook graphic with the following HREF:
The client would like a standard Image, Title, Description used, regardless of the actual page\article shared (sort of "brand control"). We currently have our og: meta tags setup to render down the same data for each page/article.
When the users click the "share" functionality, they don't get a page/article picture, nor any good description or title (as i thought the tags were supposed to provide).
The pages currently being shared are accessible to anonymous users, so the FB bot can access the pages. The image specified in the og meta tag is also available to anonymous users. The first question is why does this method of sharing not seem to use the correct defaults for sharing??
The next question is, the next feature request is to have authenticated pages be able to be shared with the same default image, title, description. I was approaching this from a server perspective, where I'd look for the FB bot and redirect the bot to a "static" page that contains only the minimal markup needed to extract the image, title, description. I've proofed this and it works pretty well. I just feel like it might be a bit complicated. Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??
Thanks In Advance!
Update:
I found this related Q/A on StackOverflow: Facebook Share doesn't show my description or my thumbnail
When I ask "Wondering if there is a "better" or more "best-practive" way to share authenticated pages and have the share functionality know about our standard image, title, description??", this is the type of thing I am talking about. If I can pass all data needed to the Facebook sharer.php via querystring parameters (and this results in no Facebook scraper action needed/taken), that is ideal, then I don't need to write any server side logic to re-route the Facebook scraper.
I tried taking the Url provided in the above noted Q/A, reformat with my data, but no luck. Wondering if this is documented somewhere on FB?
There can be a number of reasons why it isn't using the provided og meta data, but unless you share us the code/url we can just guess what might be the issue.
Make sure the og metadata resides inside the <head> tag as it won't be looking for them anywhere else. If you define them in the <body> tag or some other place, it will just ignore them.
If the pages have been liked before you added the metadata, you need to refresh the cache Facebook has for the page by providing the url's to the Facebook linter tool.
If neither of those steps resolve the problem, please share the url/code.
As far as your question regarding authenticated pages goes, you could just add that metadata on the public, non-authenticated version of the page, without checking is it actually Facebook or not, as when someone shares the page, that same information becomes public regardless of the users who view the share have access to the page or not.
After some further digging, I found a way to work with the "sharer.php" functionality to specify exactly the Image, Url, Title, and Description I want displayed, without relying on the OG meta tags. This will work for both anonymously accessible pages and pages that require an authenticated user. The linked StackOverflow Q/A (http://stackoverflow.com/questions/2950189/facebook-share-doesnt-show-my-description-or-my-thumbnail) got me headed in the right direction, then after some digging, found some other posts in the Facebook developer forums (http://forum.developers.facebook.net/) by searching for "sharer.php". This one in particular got me to where I needed to be: http://forum.developers.facebook.net/viewtopic.php?id=101127
In essence, there is no need for the OG meta tags. Just ensure the pieces of your URL are correctly encoded and that you are using the correct parameter keys (i.e. "&p[title]=" rather than "&t=".
After removing the OG meta tags from our site/pages, I also modified our Facebook sharing button/link to render the following markup:
<a href="http://www.facebook.com/sharer.php?s=100&p[title]=Our+Site+Title&p[url]=http%3a%2f%2fus.oursite.com%2fdefault.aspx&p[images][0]=http%3a%2f%2fus.oursite.com%2fimages%2fFB_ShareThumbnail_US_90x85.png&p[summary]=Our+facebook+description+that+is+used+on+the+FB+share+page." target="_blank">
<img src="/images/fb_icon_20x20.png" />
</a>
Note that I was tempted to investigate whether I could find a parameter that allowed me to specify a default "message", but that was not a requirement for us, so perhaps later on I'll dig for that information.
How about this now:
https://developers.facebook.com/docs/sharing/webmasters/crawler
You just need to whitelist the facebook crawler
When someone posts a link to a web site in Facebook, it populates the link preview box with a photo and some text from the site.
If someone posts a link to my site in Facebook, it is generally just get the site's domain name and one of the images that appears on the site. No text appears.
I would like to be able to control what text and images appear in the link. Is there a specification that they use? Can I provide some metadata so Facebook will display what I want?
Here is Facebook's developer page on their share function.
Basically there are some simple metatags you can use to optimize what appears on FB
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >
AND:
The wiki article doesn't mention this, but Facebook CACHES the results of your site for awhile. So, if you're debugging & doing quick iterations, you either need to wait awhile, or rename the page (index2.html, index3.html, etc) until you find something that works.