Perhaps similar to this question but posting a new one because of the intermittent nature of my issue. I have tried many of the suggestions in that post though.
In researching this I've seen posts as far back as 2012 where people have come up against it and while some stuff has worked for some people there isn't anything definitive that I can find as a fix. I can't seem to solve my issue at all so I'm going to detail this as much as possible that way if we do get this solved, hopefully this can act as some sort of resource.
When sharing a URL on services that use OG data the image isn't fetched, but this only happens sometimes. Most notably this happens in Facebook, but when it does happen for a particular image other OG services (like WhatsApp) will experience the same problem, leading me to believe the problem is with the image itself or the OG meta data and not Facebook's execution of it. Its not a case of waiting for the scraper to do its thing either, this has been going on for weeks now and I rescrape often.
When this happens, I get the following from the Facebook debugger:
- Warnings about Twitter properties and a "Parser Mismatched Metadata" in relation to the Twitter properties
- A notification of a redirect to the same URL with a trailing slash
- Details of the raw tags found
- The constructed data based on the raw tags
- An example of what users will see when they share the URL
With the raw tags, the constructed data and the example, there's nothing unusual and there were no other errors identified in the report. Basically, the debugger says that everything is A-OK and also shows the image that I'm expecting it to show. But when the URL is actually shared, the fetched information does not include the image.
My research suggested that Facebook is very picky about the information it needs to do some stuff and I should supply as many properties as possible. So, currently my meta looks something like this (depending on the page):
<title>Examplefest 2018 - Lineup</title>
<meta name="description" content="An outstanding lineup" />
<meta property="og:title" content="Examplefest 2018 - Lineup" />
<meta property="og:description" content="An outstanding lineup" />
<meta property="og:url" content="https://example.com/lineup/" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="15***********94" />
<meta property="og:image" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="og:image:url" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="420" />
<meta property="og:image:alt" content="Examplefest 2018 - Lineup" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Examplefest 2018 - Lineup" />
<meta property="twitter:site" content="@examplefest" />
<meta property="twitter:creator" content="@examplefest" />
<meta property="twitter:description" content="An outstanding lineup" />
<meta property="twitter:image" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="twitter:image:alt" content="Examplefest 2018 - Lineup" />
Things I've tried (in various combinations) so far based on my research:
og:url- Both with and without trailing slashog:image:url- Both with and without use of thisog:image:secure_url- Both with and without use of this when image is delivered by HTTPS<html prefix="og: http://ogp.me/ns#">- Both with and without use of this- Forced the contents of the image folder to be delivered by HTTP instead of HTTPS
- Used a .jpg instead of a .png (this seemed to work on one occasion)
- Reduced image's original dimensions and file size, now at 800x420 and 342.7kb (this also seemed to work on one occasion)
- Verified that there's no issues with my SSL certificate using SSL Shopper's SSL Checker
To force the delivery of these images over HTTP instead of HTTPS I've used .htaccess. I don't get any errors with this in my logs, there are no subfolders within the specified folder and the Facebook debugger confirms that the image it retrieved was over HTTP. My .htaccess looks like this (with a bunch of permanent and temporary redirects at the end):
Options +FollowSymLinks
RewriteEngine On
#Rewrite the WWW out of urls
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [L,NE,R=301]
#Rewrite everything to https except the contents of specific folders
RewriteCond %{HTTPS} !on
RewriteCond %{THE_REQUEST} !\s/+_images/social-shares[/?\s] [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,NE,R=301]
#Force contents of specific folders to be HTTP and not HTTPS
RewriteCond %{HTTPS} on
RewriteCond %{THE_REQUEST} \s/+_images/social-shares[/?\s] [NC]
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,NE,R=301]
#Allow cross site resources
Header add Access-Control-Allow-Origin "*"
I feel like I've tried every option I can find about it and nothing seems to work. Its baffling that it's only intermittent as well; when an image works, it works for all OG services, and when it fails, it fails for all OG services. Changing the image to a different one sometimes works and sometimes doesn't. In fact, this has about the same chance of it displaying as the first image had. Could this mean that there's some properties about the image itself that could be important to this process? Changing the image to something else isn't really an option when I have a specific image I want to share.
Has anybody got any ideas on what to try next? Or even better, can you see any glaring issues with my code? I'm quite happy to PM you a URL if you want to have a look at the real thing.
