0

I have started to try adding this to my site and I have a lot of frustrations on the lack of detail on the issue facebook is facing as the instructions are carefull followed, applied and tested. I even used tools like OpenGraphCheck.com which is able to retrieve the meta tags like shown here. I had even tried testing posting on LinkedIn the url and it works (only 'og:description' not printed). But Facebook is a crazy mess where it does not give you details and no matter how many times you tell it to recheck it will always say these errors. checking viewsource you can see everything is placed as expected. Thanks in advance for those who can assist :)

Sample OG Target: http://www.mypinoy.net/stocks/quotes/JFC

Adonis Lee Villamor
  • 177
  • 2
  • 11

1 Answers1

1

The Facebook scraper can be a bit fussy, when it gets served faulty HTML.

If you follow the See exactly what our scraper sees for your URL link at the bottom of the debug tool output, it gets displayed like this:

<!DOCTYPE html>
<html><body>
<p>&#65279;

</p>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
…

Validating your HTML shows this as the first error,

Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>. At line 1, column 1

&#65279; is a ZERO WIDTH NO-BREAK SPACE, see Why is &#65279; appearing in my HTML?

This can mess up the correct parsing of your document using a DOM parser, and that is likely the reason Facebook does not “see” your OG meta tags here.

So figure out where from this character makes its way into your output, and remove it.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • strange because if you see view-source:http://www.mypinoy.net/stocks/quotes/JFC it will show it is not structured as such... ``` MyPinoy Network ``` – Adonis Lee Villamor May 27 '20 at 07:04
  • A different DOM parser, with different error correction applied, might get different results. But that doesn’t change the fact that the error _is_ there in the first place. – CBroe May 27 '20 at 07:06
  • (Copy&pasting the view source code output of my browser into a hex editor, shows `EF BB BF` at the beginning, after a newline - so it might not be a ZERO WIDTH NO-BREAK SPACE, but a Byte Order Mark instead. These can also be problematic, if not placed correctly (it would have to be at the very start of the document, but you have a `0D 0A` newline before it.) – CBroe May 27 '20 at 07:09
  • I am not sure how its possible. its like fb crawl removed the tag entirely and put this

    

    because the code does not match the viewsource. btw I use bootstrap on this site so not sure if that causes the issue     – Adonis Lee Villamor May 27 '20 at 07:10
  • Several tags in HTML are _optional_, and will be inserted automatically by a parser, if they have not already occurred, but the content encountered up to that point requires the corresponding elements to exist already. So the first character data usually triggers implicit opening of the `body` element, and a parser that does not allow text data as direct content of body, might also insert a `p` element, or something similar. What you see here is not the _literal_ content of your document, but what it has been _interpreted as_. Those are different things, don’t get confused by that. – CBroe May 27 '20 at 07:21
  • got it, saw what you are saying. it has this strange character at the start of the text when I test in Notepad++. when I switch encoding type. this does not exist in the original code though. so it could be ExpressJs render or the view engine hbs which I am using. checking it for the meantime. thanks – Adonis Lee Villamor May 27 '20 at 07:28
  • it works now thanks. So the issue is Facebook will not work if the code has these hidden characters which happens when you save file as UTF-8 in some IDE. In my case its Visual Studio 2019. I had to save each of the file explicitly as "UTF-8 No Signature". – Adonis Lee Villamor May 27 '20 at 08:09