oEmbed expansion in Gatsby




oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

How to use oEmbed in Gatsby

raae/gatsby-remark-oembed is a nice plugin for expanding urls as card components.
Accoding to its README, many sites are supported.

So far these providers are confirmed to be working: CodePen, Flickr, Instagram, Reddit, Twitch, Twitter, Vimeo, YouTube, SoundCloud.

However, some sites, for example. hatenablog is not supported so far. It needs more configurations in addition to How to use to apply it onto hatenablog entries.

The configuration looks like:

    resolve: `@raae/gatsby-remark-oembed`,
    options: {
        usePrefix: false,
        providers: {
        settings: {
            hatenablog: {
                endpoints: [
                        schemes: ["https://**"],
                        url: "",

Then, it’s able to show expanded blog card like: