There was a time when the Internet was primarily driven by text content. There was no option to embed those cute cat images and funny videos in your blog.

Slowly time changed, and we got to where we are right now, with rich content spread all around us. But who and what caused this change? Let's learn together. But before that, here's a quick introduction to embedding if you are not aware of what it is -


Embedding refers to integrating external content on your webpage like images, videos, social media posts, etc. that look native as if they are naturally part of your webpage.

Now let's learn about the good old part of the web-

History of Embedding in HTML

In the early ’90s, our beloved web was very different than it is today. A dedicated group of geeks used e-mail lists to discuss the future of the language at its core, HTML. (Source: Wired)

Marc Andreesen(future Netscape founder) shared the details of his new creation - the tag in an email he wrote on 25th Feb 1993. This was the beginning of both embedding images in HTML and embedding in general.

After that, Netscape created the <EMBED>(now deprecated) tag which made it possible to embed external resources like audio, video, etc in the HTML. Thanks to the <EMBED> tag, we can embed YouTube videos in emails, tweets, articles, Facebook posts, and other places.

Types of Content you can embed

  1. Media Files - Images, Audio, Videos, GIFs, etc.
  2. Social Media - Tweets, Facebook and Instagram posts, Pinterest pins and boards, LinkedIn posts, etc.
  3. Music Platforms - These days it's also possible to embed audio content from music platforms like Spotify, SoundCloud, etc.
  4. Video Platforms - This includes embedding videos from platforms like YouTube, Dailymotion, Vimeo, etc.
  5. Forms - Embedding third-party form services like Google Forms, Typeform, etc.
  6. Other Widgets - You can embed countless other widgets on your website. Some of the popular ones are - Google Reviews, Countdown Timer, World Clock, Google Maps, Paypal/Patreon buttons, Weather, etc.

Benefits of embedding rich content

1. Captures attention

Images and Videos are visually appealing to the eyes. In the age of the Internet, where most people come to your website only to skim content, rich media helps you grab the attention of users by creating differentiation and by giving them the hook to go slow.

2. Reduces bounce rate

This is the continuation of the last point. With enough rich media content placed in proper places, it will force the users to go slow and actually see what's on the webpage. This will make them stay on the webpage for longer, and in turn reduce the bounce rate of your website.

3. Increases CTR

When users will spend more time on your website and are happy with the content, there are more likely to interact with the webpage. So, whether you want them to watch a YouTube video, want to collect their email IDs, or redirect them to another webpage, the likelihood of that increases when they stay on the page for more extended periods of time.

4. Complements the content

Media types like images related to the content, Infographics, GIFs, YouTube videos, tweets, etc. provide completeness to your content and help users get additional information on the topic. Placing images and GIFs in the right places also helps in storytelling.

EXAMPLE: Embedding different content types in HTML

In this section, we will see some practical examples of how to embed certain media types in HTML like audio, video, tweet, Instagram post, etc-

Embedding audio in HTML

<audio

    controls

    src="/media/cc0-audio/fire.mp3">

</audio>

Embedding video in HTML

<video

    controls

    width="200"

    src="rain.mp4">

</video>

Embedding a Tweet in HTML

Embedding a Facebook post in HTML

Embedding an Instagram post in HTML

Embedding a Codepen Pen in HTML

Embedding a YouTube video in HTML

Wrapping Up

In 2023, it's crucial to have rich content in your content strategy. We have already covered the benefits of embedding rich content on your website and various examples of how you can do it.

I hope you liked this article and it enlightened you about embedding rich content and how to do it. If you have got any questions, DM me on Twitter.