Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 506
And Finally Avatar asked Feb 08 '23 07:02

And Finally


1 Answers

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.

like image 134
And Finally Avatar answered Feb 13 '23 05:02

And Finally