I'm getting an off error I've never seen from the Facebook OG debugger.
Debugger: https://developers.facebook.com/tools/debug
URL I'm debugging: http://www.dallianceaccessories.com/
My Meta tags for FB/OG:
<meta property="og:title" content="Dalliance Accessories" />
<meta property="og:description" content="Dalliance Accessories is proud to release our new collection with the launch of Dalliance 2.0! Drawing inspiration from all over the world, we are excited to present our new pieces featuring bold stones, neon chord, collars, bracelets and natural stone charged pieces. Striving for a eclectic take on accessories and accessorizing for an instant love affair!" />
<meta property="og:url" content="http://www.dallianceaccessories.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Dalliance Accessories" />
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-logo.png">
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-screenshot.jpg">
Error I'm getting:
Parser Mismatched Metadata: The parser's result for this metadata did not match the input
metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple
values being given for a property only expecting a single value, or property values for a
given property being mismatched. Here are the input properties that were not seen in the
parsed result: 'og:image:url'
I dont get it. I've looked all over for answers, but no solutions have worked. There's no extra spaces at the end (one suggested solution) and I've hand type everything so theres no invisible characters either.
The problem seems to only come up with i put images in. So random. I had images just fine on the last version of the site. Anybody got any ideas?
Update: So this is only a problem on the home page, and i still cant figure out why. I do not see this error anywhere else. (eg. When I debug http://www.dallianceaccessories.com/necklaces.html)
I figured out a way around this. It's dirty, but it works.
Background Info: When i tried to change the website title for the home page, it told me 'you cannot change the title for this frozen page' etc. The 'frozen' part put up a mental red flag, but changing the title on the home page wasnt a big deal so I kept going.
Now, while trying to figure this out, I thought maybe it's looking for some of my old OG data because of whatever this 'frozen' data is. I assume for some reason I Cant change too much of my OG data on a page?
The fix: fter adding the 4 images that were previously specified in the last website version's OG data, it d allowed me to update the OG data via the debugger. It now reads completely fine. Adding the old image urls allowed me to update the title, description, etc. when people share.
My guess is there's some kind of check to see if too much data has changed and i somehow triggered it??? I'm not too sure why they would do that, but it seems to be the case.
Just to be clear, here is what all my image tags are now (the bottom 4 arent even valid urls, but they are what i used to have).
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-logo.png" />
<meta property="og:image" content="http://www.dallianceaccessories.com/skin/frontend/default/blanco/images/dalliance-screenshot.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-miko.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-pagan.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/slider-sugarchain-black.jpg" />
<meta property="og:image" content="http://www.dallianceaccessories.com/wp-content/themes/Core/images/og-logo.jpg" />
I will try to ween out these old image urls somehow or maybe populate the old urls with new images, until i can somehow find a proper way around this bug.
Related
After deploying my react app, I noticed that when I am sharing it on whatsapp for example, The link looks really basic.
Title is "React App" and descriptions is "website created with create-react app".
I have managed to change title and description from the meta inside index.html and got something like:
My App
My description
I am trying to make it look like that:
I have read about React helmet but I did not understand if it is right for my case.
Thanks in advance!
For determining what your website looks like on social media, you'll want to add more meta tags containing Open Graph data.
// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">
Using this protocol you can tell crawlers what properties to use to make up those previews on WhatsApp, Facebook, etc.
Here's the docs for all the available properties:
https://ogp.me/
React helmet is helpful if you need to customise the meta data on a per page basis, if you just need one set of data to be shown for your entire site it's not necessary for you to use it.
You should look into Open Graph tags. To break down the example image you provided there is 4 noteworthy sections (taken from their source code):
<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">
You can take a look at the page source to see this information and match it up if you would prefer to learn by seeing.
If you do look, you'll notice there is a seeming repetition of some tags, e.g. twitter:image, this allows you to provide images in different aspect ratios for these platforms to pull.
Note: It can sometimes take time for the crawler to pick up on changes to your meta tags, so be aware changes might not be immediately reflected.
I have a website that triggers a warning when clicked through a link shared on Facebook. The warning says:
Possible problem with this link
We have detected that this link: http://www.example.online/ may be malicious.
To keep your account and device secure, only follow links you trust."
I ran the Facebook debug tool and I get the following error message:
Inferred Property
The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I Googled this issue and I understand it is caused by some lack of meta information in the site header, but my site's code has the following in the header:
<meta http-equiv="etag" content="2efdc27c8967f14e2c829e601f7a1228"/>
<meta property="og:title" content="South Jersey Aerial Photograpahy"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.online/"/>
<meta property="og:image" content="https://static.example.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>
<meta property="og:site_name" content="South Jersey Aerial Photograpahy"/>
<meta property="og:description" content="South Jersey Aerial Photography is South Jersey's premier aerial photography and aerial videography company. Fully licensed and insured. Contact us today!"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
I have no idea how to fix this error message. The property metatag is clearly there.
In short, you should re-fetch your website information using this tool:
https://developers.facebook.com/tools/debug/
Paste your URL and press Debug. Then either do Fetch, or press Scrape Again.
This will refresh Facebook cache, and your html-page will be reloaded.
Some additional info: https://stackoverflow.com/a/44453472/4899346
Following the already mentioned link to the Facebook object debugger, make sure that your og tags are written RIGHT AFTER the opening <head> tag.
Not sure why this happens but I used to run into the exact same issue until I moved them right after it and then clicked once again on "Fetch new scrape information".
Hope this helps!
Check for og:url tag and see whether the url is correct or not. In my case the url was not correct and so it was causing this type of error.
Ran into the same issue today. It would appear that it's a bug on Facebook's end.
Just by refreshing the Sharing Debugger will show me different error messages after each reload, including "Image Too Big", which clearly was not the case, and "Meta Tags In Body" which also was not correct.
As long as the correct image shows up in the Link Preview, I think you're good to go.
Had same issue today
'og:image' property should be explicitly provided, even if a value can
be inferred from other tags
somehow my linter replaced "(quotation mark) to ”(right double quotation mark), therefore https://developers.facebook.com/tools/debug/sharing/ was showing issue,
cause of that, these meta properties were not visible to fb-bot. After this correction it works fine
Even if you have a proper OG tag on a page, can Facebook still ignored og:image value.
On my Magento 2 website, I use Magento 2 Facebook Open Graph by Magefan and had this issue too even all OG tags look good :-(
After I contacted them (magefan), they fixed the issue and released the module update v2.0.12
It turned out that Facebook only looks for og:image in the first 50Kbs of the page source.
So if you are using inline CSS, or some JS in the the og:image will not be seen by Facebook. That was the reason in my case.
The solution is to put OG tags as high as possible in the node.
Added the
<meta property="og:image:secure_url" content="https://abc/image.jpg" />
in order for the facebook debug to actually show my issue that the image was not 200x200. Corrected that and had to completely refresh the debug to resolve.
OG tags should be property instead of name for those of you who copy/paste from other tags like twitter, who uses name.
Eg
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
If you're using a plugin like W3 Total Cache, Just purge your cache and go back to Facebook object debugger page mentioned by #Alex C and then click on Fetch new scrape information.
This solved the issue for me
`<meta property="og:image" content="https://static.wixstatic.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>`
<meta property="og:image:width" content="2500"/>
<meta property="og:image:height" content="1330"/>
1200 pixels x 627 pixels
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.
Double check your img file size.
Remember you need to add og:image:secure for "https"
2.og:image only works with "http".
Try
<meta property="og:image" content="http://example.com/image">
<meta property="og:image:secure" content="https://example.com/image">
I had og:url content as http://... when my site always redirected to https://.... Updating this fixed the issue for me.
I have had success by using https://developers.facebook.com/tools/debug/sharing/batch/ to invalidate the FB cache, then using https://developers.facebook.com/tools/debug/ to refresh it.
This seems to help if a page/post has been previously shared, say, and then an og image or other og element was added.
I have a customized share button using this code:
<i class="social fa fa-facebook-square fa-3x social-fb"></i>
and I'm specifying what I would like it to say and display here:
<!--facebook share directions-->
<meta property="fb:app_id" content="1234567890" />
<meta property="og:type" content="website" />
<meta property="og:url" content="url here" />
<meta property="og:title" content="title here" />
<meta property="og:image" content="image here" />
<!--facebook share directions-->
but when I go to share it pulls a random picture and random text to appear in the post, is there any way for me to force this? could it be stuck in cache? I'm completely stuck
Instead of using sharing, you will could use the feed dialog, that's the only way to define what will be shared in your story. But if you really want to use Open Graph, you will have to implement it correctly and sometimes need to wait a few days. I would need to take a look at the website, or at least see your full head code, are you using any Canonical URL tag? If the implementation is all correct, you need to wait a couple days, and try sharing it again. If you still having the same share, you can now use Facebook url scraper , the Open Graph object debugger, its on the platform website. But, my friend, honestly, sharing with "" is not functional, have a very bad user experience, popup blocking, and lots of other issues. Please, implement Facebook JS SDK, even if you choose to keep using share instead of FEED .
I have a superheroes quiz game at this address: mysite/index.html, the quiz has 2 possible results mysite/result1.html and mysite/result2.html.
Each result page has the open graph tags as:
<meta property="og:type" content="website" />
<meta property="og:title" content="Great you are Superman" />
<meta property="og:description" content="Description of Superman" />
<meta property="og:url" content="mysite/result1.html" />
<meta property="og:image" content="image.jpg" />
All works fine but in this way I'm sharing the result page url instead I want to share the index page url. It seems I can't change the url in the tag og:url because otherwise the meta data information will be get from the index page.
So how I can share the result information but with only the link to the index page?
Whatever's in the OG tags is tied to that URL. But, I'd say there were two options for getting this to share correctly.
First, why not use the feed dialog options to fill in the share dialog to mention the result that the user got? Set the caption, picture correctly, and link to the starting page of the quiz.
Or, create a few extra starting pages. Create a quiz to start the page from somebody who shared that they got Superman, and another for somebody who got Batman.
I have a problem with the og:image tag. I followed the instructions on SO about implementing the tag, which was very straight forward. It works great when someone like's the page. There is now a problem though, that when I post the link into a message I am composing on facebook, it does not show any thumbnail.
Here's my site: http://www.sunlitehardware.com.au/
So check this.
Okay jump onto facebook, and create a private message to one of your friends.
Paste in this link: http://www.sunlitehardware.com.au/blog/Power-Tools-Save-Your-Energy
Watch the thumbnail box below the post generate, and pull in some data. You'll notice it has a title, a link but no image.
The head of that particular link looks like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.sunlitehardware.com.au/site/assets/template/images/favicon.ico" />
<meta property="og:title" content="Power Tools - Save Your Energy" />
<meta property="og:image" content="http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Sunlite Hardware stock a massive range of tools for all your hardware needs in Sydney City & Bondi Junction." />
<meta name="keywords" content=",hardware, store, city, power tools, llight bulbs, paint, sydney, bondi junction" />
<meta name="verify-v1" content="Ow6TX6iHLufi9DAwV6mWquC9SEW4Les+o/wz29uUdeY=" />
If you take a look, the link to the og:image link, you can see the link points here:
http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg
If you were to click that, you should be able to see the image, i know I can, so the link is working.
Seems like for some reason facebook is ignoring it ..
Take a look at the facebook lint page here: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.sunlitehardware.com.au%2Fblog%2FPower-Tools-Save-Your-Energy
It has the thumbnail there. It just won't work when making posts. Any ideas?
The Facebook Debugger is a handy way of checking your links and usually warns you of the problems with your OG tags.
For the og:image, try using an image that's closer to 50x50 (yours is roughly 1200x1200).