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?
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>:
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:
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.
Maybe try closing the <img > tag:
<figure>
<img src="https://test.files.wordpress.com/2015/07/selleck1.jpg?quality=60&strip=all />
</figure>
It could be that Facebook simply strips invalid XML (!), resulting in observed error message.
In the example at
the - yet self-enclosing - <img> tag is closed (as in XHTML, rather than less restrictive HTML5).
PIA for wordpress sites, all it's content comes between
tags and this eventually generates one <p> empty <\p>. For this you need to go through your post content and remove all these empty tags.
Just open the warning marked article in edit mode in and update. It will fix.
