How To Write SEO-Friendly Code To Embed An Image Or Video

In this article, we will discuss how to write SEO-friendly code to embed an image or video. So keep reading.

Visuals have a captivating power to engage our audience and keep our readers interested. Images and videos increase the readability of your text, while also illustrating the point you are making.

But, images are not only read by your readers. They are also read by the Google spiders when indexing your page. There are simple steps to help you optimize your website with a few extra lines of code.

In this article, we will cover the basics of using your images to help your SEO. You will find out:

1. Why you should optimize your code,
2. Which attributes are important to add to the images and videos,
3. How to write the HTML codes,
4. Examples of well-written codes.

Fasten your seatbelts, here we go.

1. Why Do You Need To Optimize Your Code?

The attributes of an image or video you are embedding on your page are not visible to the reader. So, why does it matter to add them in the first place?

Google is indexing your page and estimates its relevance according to what it can find on your page. It values the keywords you use, links you include, the UX of the page. But, it cannot read the visual content.

To help the spiders know what your image is about, you should translate the visuals to text by using image title and alt tags to describe it.

This way, even if people are using image search software, they can come across your blog because your picture is described exactly in the way you need it to be.

Another reason why this is so important is when your website is visited by someone with visual impairment. The website will describe the images and videos to them only if you add this description to your code.

2. Which Attributes of an Image Or Video Matter the Most

Two main attributes you will need to use in your code when you embed an image or video (no exceptions!) are alt tag and title tag. Technically speaking, neither of those are tags, they are in fact attributes, but they are commonly referred to this way. The alt tag is also known as alt text.

The alt text essentially describes what is in the picture – literally. If you have a button on your landing page that subscribes someone to your newsletter, the alt text should say “button to subscribe to our newsletter”.

Screen readers (browsers used by visually impaired people) read the alt text when they come across a picture/button/video. The title attribute is what you see as an extra description when you float over the element with your courser.

Even though the alt text is mandatory for many reasons, the title attribute is not always necessary. In fact, sometimes there is no point in adding it. So, the only time it will be required for you to use a title text is when applying <iframe> and <frame> tags in your code.

If the information you are thinking of sharing as a title is super relevant to the text, then you should add it in the article itself as well.

3. How to Optimize Image And Video HTML Attributes

All of your images and videos in the HTML code must have an alt tag. In case the picture you have added does not have a purpose but it’s in your code anyways, leave an alt tag empty:

<img src=”no-purpose-picture.png” alt=””>

This empty attribute will make sure the screen readers skip the image when reading the text. In WordPress or other website builders, you can leave the alt tag field blank. Better yet, if you are able to, remove the picture from HTML and place it in your CSS.

How to write a good alt text?

Your alt text is really important to Google because that is how the spiders learn what is in the picture. When writing the alt text, think of what you would say if someone asked you what you see in that image.

Use descriptive text.

This text also helps the spiders determine how is the image/video related to the text around it, and the overall page. Some SEO software that you can use as plugins, such as Yoast SEO, have features to help you add alt text with your focus keyphrase to at least one picture on the whole page.

Don’t stuff the alt text with keywords.

That is so beyond the point. Your images should be an added value to your text, not just a part of the SEO strategy. Use the quality images that will help your readers understand you better and love your content. When you stuff your alt texts with keywords, it sends a red flag to Google and affects your user rank badly. Only add a keyphrase to an image where it comes naturally to do so.

Change the image file name.

Before even uploading the visual content, check if the name of the .jpg, .png, .mp4, fit the description of the content. Avoid uploading files such as video12.wav, 123.jpg, and similar.

Find the balance.

Generally speaking, the keyphrases should be present in about 30-70% of the alt texts of all the images on a single page. Everything less than that will fail to present why the image or video is relevant. Everything more than that will result in a negative user experience and mark you as spam.

4. Examples Of Well Written Codes

Let’s check out how writing good alt texts look like in real life. Let’s take a few random blog posts and try to optimize stock photos we would like to include to illustrate our text.

Example 1 – Hulk Smash

Say our blog is discussing Marvel toys on the market. The keyphrase for the blog post is “Hulk toy”, and there is a great way of using it in the following image code.

<img src=”hulk-punching.png” alt=”Hulk toy punching a POW sign on a blackboard with a fist” title=“Hulk toy punching a blackboard”>

Example 2 – Website flowchart

On behalf of a website builder, we are writing a blog post discussing the ways of making a website flowchart. “Website flowchart” is our keyphrase and we can use it in the alt text.

<img src=”flowchart.png” alt=”Website flowchart being written on a whiteboard by a person” title=”Designing a website flowchart”>

Example 3 – Video marketing

In this example, the image adds value to our article about video marketing, but the description of the image does not include the keyphrase, yet it is still well-optimized for SEO.

To Sum Up

So, we have agreed that adding a few extra lines in code will help our website rank better on Google. We also agreed that it will increase the overall readability of the site, and make it more accessible for people, as well as machines.

Now that you understand the importance of adding attributes to your code when you add visual content, you can start optimizing your website page by page. Visuals are quite an effective way to make people (and Google) love your content.

Don’t forget to add descriptive alt tags to all your embedded visuals: images, videos, live streams. Videos are powerful to use as a cross-channel promotion mechanism: promote your YouTube channel on your website and your website on each of your YouTube videos. Whatever your business model might be, you can always score extra points when you take care of your HTML.

So that’s all from our side. I hope you enjoyed this article on how to write SEO-friendly code to embed an image or video. Also, if you like this article, then please share it with your social media followers and friends.

Author:

Nina Petrov is a content writer, passionate about graphic design, content marketing, and the new generation of green and social businesses. She starts the day scrolling her digest on new digital trends while sipping a cup of coffee with milk and sugar. Her white little bunny tends to reply to your emails when she is on vacation.