I'm trying to have a share button on my site that can share on behalf of YouTube. Let's say the page is http://www.mysite.com/test.html.
test.html
<!DOCTYPE html>
<html>
<head>
<meta property="og:url" content="http://www.youtube.com">
<meta property="og:description" content="My custom YouTube share">
<meta property="og:title" content="YouTube Share">
<meta property="og:image" content="http://www.mysite.com/preview.png">
</head>
<body>
<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.mysite.com%2Ftest.html">Share</a
</body>
<html>
But it's completely ignoring my meta properties when I click the Share. How can I get it so that Facebook looks at all of my declared meta properties? Or is it impossible to share on behalf of another site?
EDIT:
Here's a sample screenshot of what I'm trying to do:
To get custom text on another site's content share, you could use a URL on your site as the og:url, serve facebook's crawler the meta tags with the title, description etc that you want, but redirect other browsers to YouTube
(i.e share a link to a URL on your site, then on that URL have logic which says
if user agent == Facebook's crawler serve meta tags, else HTTP 301 redirect to youtube
Related
I host my static website on Google Storage with a domain bought from Godaddy and changed the nameservers to CloudFlare for SSL security. When I attempt to share my website on social media the image preview that is shown is displayed below. My Meta tags in my website head are also displayed below. I have Googled, spoken to Godaddy, checked documentation on CloudFlare there is no clear solution to my share image preview problem.
HTML Header Code
<!-- Meta -->
<!-- Primary Meta Tags -->
<title>Virtual HBCU</title>
<meta name="title" content="Virtual HBCU">
<meta name="description" content="Explore virtual HBCU tours and exhibits.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://virtualhbcu.com">
<meta property="og:title" content="Virtual HBCU">
<meta property="og:description" content="Explore virtual HBCU tours and exhibits.">
<meta property="og:image" content="https://virtual-hbcu.s3.eu-west-2.amazonaws.com/OG+VIRTUAL+HBCU.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://virtualhbcu.com">
<meta property="twitter:title" content="Virtual HBCU">
<meta property="twitter:description" content="Explore virtual HBCU tours and exhibits.">
<meta property="twitter:image" content="https://virtual-hbcu.s3.eu-west-2.amazonaws.com/OG+VIRTUAL+HBCU.png">
What is being shown on social sharing...
How do I resolve to preview image issue on social sharing links?
The image preview should look like this...
Edit:
Permanent redirect...
I've swapped the domain to example.com to make this answer a bit more general - switch it back when testing and implementing.
The issue here is that www.example.com points to your actual website, but example.com (without www.) redirects you to another site - in this case, a 404 from a URL shortener. Even though on social media the link you're entering starts with www., the <meta> og:url and twitter:url properties tell the social networks to ignore that, and use the non-www. version specified instead.
Check your DNS entry for the www name in Cloudflare - something is misconfigured somewhere, perhaps a typo in the IP. It could also be something misconfigured at your hosting provider.
You should also update the <meta> tags to use URLs consistent with where the page is actually being displayed.
You could add a Page Rule in Cloudflare to redirect the non-www. version of your site to the www. version.
If the URL matches example.com/*, use a Forwarding URL with 301 Permanent Redirect to https://www.example.com/$1, where $1 is the first appearance of * in your rule.
I am trying to add og:type, og:title, og:image, og:description, and og:url meta tags to my laravel page but none of them are being properly scraped by the Facebook Sharing Debugger.
I’ve already tried moving these meta tags around but the result from Facebook never changes.
Here’s a part of the HTML meta tags I have added:
The meta tags I have added are not being scraped properly and the debugger returns the following:
P.S.
For some reason, Facebook seems to be scraping my main page instead of the link I have provided. I am sure my link is publicly accessible.
For some reason, Facebook seems to be scraping my main page instead of the link I have provided.
Facebook is just doing what you’re telling it to:
<meta property="og:url" content="http://dev.mafindoor.com">
From the Open Graph docs:
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
When the Facebook crawler finds this tag, treats it like a <link rel="canonical"> tag - by treating the crawled page as an alias for the linked URL.
The og:url meta tag should be set to the preferred URL of the current page, not the entire website.
You can see this behaviour in the Facebook Sharing Debugger (link):
PS:
As it stands, one of your OG meta tags uses mixed single and double quotes, rendering it and all subsequent tags invalid:
<meta property="og:type" content='website">
<meta property="og:title" content='Mafindoor - SM City Legazpi">
<meta property="og:image" content="http://mafindoor.com/img/pages/screen2.jpg">
<meta property="og:description" content="Thanks Mafindoor for helping me find my ways inside SM City Legazpi">
<meta property="og:url" content="http://dev.mafindoor.com">
<meta property="fb:app_id" content="329159957633823">
This is only a guess based on your images but try to use double quotes content="" and so on. I would place your og tags at the end of head section. OG title can possibly be ovverriden with <title> and og description with standard meta description tag.
I read og documentation and they advise to provide image dimensions:
<meta property="og:image" content="fav/og-thumb.png">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
I am trying to update some old iOS/Android Facebook sharing code to work with the new sharing API. The old API used to let you specify a URL and an image, so users see the image in the FB feed and if they click on it, it takes them to the URL. I'm trying to figure out how to do the same thing under the new API.
This is for a game program. The way it worked is if a user got a high score - say, 1000 points - I would bring up a share dialog, specify a URL for a stylized "1,000 points!" JPG as the image, and specify the game's home page as the destination URL. Under the new approach, I'm not allowed to specify the image, instead they want me to specify it in the Open Graph metadata for the target URL. This is the solution I came up with under the new approach:
<!DOCTYPE html>
<html>
<head>
<title>NAME OF GAME</title>
<meta http-equiv="refresh" content="0; URL='GAME WEBSITE'" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NAME OF GAME" />
<meta property="og:image" content="URL OF JPG" />
<meta property="og:url" content="URL OF JPG" />
<meta property="og:description" content="NAME OF GAME" />
</head>
</html>
This mostly works. When a user shares a link to the above web page, they get the JPG image showing their score, and if you click on the JPG it redirects you to my game's website - however, in the news feed Facebook is now overlaying the URL of the redirected page and a little arrow to show that a redirect will take place. If I can eliminate the ugly overlays and just show the image, my work is done. If you have any insights they would be greatly appreciated.
I'm having issues with sharing a website I'm working on on LinkedIn: LinkedIn doesn't fetch any data from the page. The site's metadata follows the recommendations in their docs. I tried all these suggestions.
In addition, I investigated the following:
Serving content over HTTP instead of HTTPS, but a lot of other sites served over HTTPS, such as https://stripe.com/no and https://www.facebook.com/, work perfectly fine.
Posting as a company page. This didn't make any difference, other than allowing manual data entry (which is handy as a makeshift solution).
Posting as a different user. Didn't make any difference.
Posting new content on the website to make sure that the metadata hadn't been cached by LinkedIn. This also didn't make any difference.
This was also a problem before I added the Open Graph meta tags.
This might be a problem caused by LinkedIn, but – considering that this works for other sites – I'm open to the possibility that I'm the one doing something wrong.
I don't think you will see any changes in the data that LinkedIn grabs from your website for about a week:
The first time that LinkedIn's crawlers visit a webpage when asked to share content via a URL, the data it finds (Open Graph values or our own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description, upload a new image, fix a typo in the title, etc., you will not see the change represented during any subsequent attempts to share the page until the cache has expired and the crawler is forced to revisit the page to retrieve fresh content.
https://developer.linkedin.com/docs/share-on-linkedin (scroll to the bottom)
In my case it seemed that LinkedIn Parser is really poor to the point that if your HTML file doesn't have the <head> tag (which is not required by the spec) It will simply ignore everything where the bellow wouldn't work
<!doctype html>
<meta charset=utf-8>
<meta property=og:title content='My Shared Article Title'>
<meta property=og:description content='Description of shared article'>
<meta property=og:image content=http://i.imgur.com/12345.jpg>
<meta name=description content='Nice description'>
<title>TEST 15</title>
<p>content here</p>
But simply adding the opening <head> tag (still valid HTML), did the trick
<!doctype html>
<head>
<meta charset=utf-8>
<meta property=og:title content='My Shared Article Title'>
<meta property=og:description content='Description of shared article'>
<meta property=og:image content=http://i.imgur.com/12345.jpg>
<meta name=description content='Nice description'>
<title>TEST 15</title>
<p>content here</p>
I was having the exact same issue. Clear your cache history. Then add this 'prefix="og: http://ogp.me/ns#'" to each metadata tag, and it will work immediately:
<meta prefix="og: http://ogp.me/ns#" property='og:title' content='Content Title'/>
<meta prefix="og: http://ogp.me/ns#" property='og:image' content='https://images.url...'/>
<meta prefix="og: http://ogp.me/ns#" property='og:description' content='Description'/>
<meta prefix="og: http://ogp.me/ns#" property='og:url' content='https://site_url/'/>
This will fix it for you just enter your website into here and it seems to clear their cache which in my case was about 3 years old cache ???
https://www.linkedin.com/post-inspector/inspect/
As in all things programming, let's first look at the Official LinkedIn Sharing Documentation! The LinkedIn share API will respect the following og: tags in your HTML...
<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" />
Want to be sure you're using it right? That's easy -- check out the Official LinkedIn Post Inspector to have your share URL debugged, checked, and verified.
I have a wordpress website with a few simple pages and a facebook share button in the header. As it is now, facebook uses the wordpress page name as the title for the share, but I'd like it to use the html title instead (or just specify my own). How would I go about this?
Check this plugin. It allows you to add open graph tags on page or post basis or default settings for your site.
http://wordpress.org/extend/plugins/open-graph-protocol-in-posts-and-pages/
Just set the <meta property> tags in your HTML. Notice the indented lines:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Your Title</title>
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="http://www.example.com/myimage.jpg" />
...
</head>
...
</html>
You have a wide variety of properties to choose from: Open Graph Protocol Official Documentation. Ultimately, this is just a problem of using the right HTML.