Can I Put Image Inside Heading?

@ SEO

Is it Compliant?

Placing an image inside a heading is compliant syntax.

After researching and testing (using W3C Markup Validation Service🔗), the conclusion is that putting an image inside a heading is 100% compliant syntax. Heading tags can accept inline elements, and <img> is an inline element, so it can be placed within heading tags.

Is it a Good Practice?

Although there is much debate online, Google Search Central’s response is: “This is a good practice🔗”!

This means that the following syntax is valid and a good practice:

<!-- 😀 Good -->
<h1>
  <a href="/">
    <img src="logo.svg" alt="A company's LOGO" />
  </a>
</h1>


<h2>
  <img src="cat-with-sign.webp" alt="A cat holding a sign that says 'Adoption Information'" />
</h2>

Since the alt attribute for images has some recommended rules to follow🔗, I can imagine that separating decorative images from headings and using CSS to hide the heading text could also be a good choice. For example, Bootstrap has visually-hidden🔗 and Tailwind has sr-only🔗 to make text visually hidden but semantically present.

<h2 class="visually-hidden">Adoption Information</h2>
<img src="cat-with-sign.webp" alt="A cat holding a sign that says 'Adoption Information'" />

References