DEV Community

Vincent A. Cicirello
Vincent A. Cicirello

Posted on • Updated on

For embeds, does DEV use Open Graph tags? And what is the minimum set of OG tags required by DEV for an embed to work?

UPDATE For the answer to the question posed in this post, please see the following post:

ORIGINAL POST STARTS HERE

My two part question is the title of the post. But here is a bit more context.

I'm assuming DEV uses Open Graph tags for processing embeds of websites. As an experiment, I tried to embed a page that did not have open graph tags, with the following {% embed https://url/to/page/without/open/graph/tags %} and the behavior was reasonable for such a page (e.g., a link to the page with the URL as the text of the link and nothing else). You can't really do much else if you aren't given the relevant data.

When trying the same with a page that has og:url, og:title, og:image, og:image:width, and og:image:height, DEV.to's preview in the editor results in the error: Liquid error: internal. Here's a specific example in markdown:

{% embed https://www.cicirello.org/ %}
Enter fullscreen mode Exit fullscreen mode

And here is with what the above produces (UPDATE: Works now by adding the og:description property):

Vincent A. Cicirello - Professor of Computer Science

Vincent A. Cicirello - Professor of Computer Science at Stockton University - is a researcher in artificial intelligence, evolutionary computation, swarm intelligence, and computational intelligence, with a Ph.D. in Robotics from Carnegie Mellon University. He is an ACM Senior Member, IEEE Senior Member, AAAI Life Member, EAI Distinguished Member, and SIAM Member.

favicon cicirello.org

Am I correct that Open Graph tags are used when processing embeds in a DEV.to post? And if so, what is the minimum set that are required for an embed to work correctly?

I'm guessing that my error might be the lack of og:type because that is the only one of the four that the Open Graph protocol lists as required (og:title, og:type, og:image, og:url) that I don't currently have. But further down in the Open Graph protocol, it says "Any non-marked up webpage should be treated as og:type website." I was (probably incorrectly) assuming that leaving og:type out implies website for the type, which is why I left it out. That appears to be the behavior on other sites that use OG tags (e.g., LinkedIn), website assumed if tag not present.

But another possibility is my lack of og:description, which seems to be commonly used, but not listed among the required tags in the protocol.

Anyway, which tags does DEV require for embeds to work?

Top comments (2)

Collapse
 
cicirello profile image
Vincent A. Cicirello

For anyone stumbling upon this post... I added og:description and it works. That property is listed as recommended in Open Graph protocol, but here on DEV.to it appears to be required if you want an embed to work.

Also og:type doesn't seem to be needed if type is website.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

That's a great question!

As you're already toying with that, why don't you set one, test, then delete the one you put before, add the other one and test it again?

Maybe this way we end up knowing the platform better and it's nuances! 😁