UPDATE For the answer to the question posed in this post, please see the following post:
How to Enable DEV Post Embeds for Pages From Your Website
Vincent A. Cicirello ・ Jul 29 '22
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/ %}
And here is with what the above produces (UPDATE: Works now by adding the og:description
property):
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)
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.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! 😁