Facebook Instant Articles error "The HTML element does not contain any text: Avoid including empty HTML elements"

And Finally picture And Finally · Dec 15, 2015 · Viewed 8.9k times · Source

In many of the articles imported from my development feed to Facebook Instant Articles I get the error "The HTML element does not contain any text: Avoid including empty HTML elements." It seems to be related to images in figures with no other content. Can anybody tell me what it is Facebook's complaining about? My markup seems to conform to Facebook's own example of a simple image inside a figure tag, so what's the problem?

enter image description here

Answer

And Finally picture And Finally · Mar 4, 2016

Turns out the Facebook parser doesn't like a <p> tag wrapping an element if there's no text in it. When I edit one of the articles highlighted with the yellow warning icon in the Facebook code editor, there's an empty <p></p>:

enter image description here

When I delete the empty element the error warning remains in the code view. But this is just a glitch in the code editor. You can't always rely on the error highlighting in that. (That explains why there's a code error warning in the pic in my question even though I'd deleted the <p>.) In the article list the warning icon disappears:

enter image description here

And FB publishes the Instant Article.

You will also get this error if your markup contains stuff like <p><img src="..."></p>. FB expects all <p> tags to contain text.