Member Avatar for Reliable

Hello All,

I'm torn between methods for using an image as my website header while still maintaining accessibility and making the site SEO friendly. I initially just used the image as a background image. I also saw how another site used the image as the background image with an actual text h1 tag but used CSS to place the text of screen so all the user sees is the image. Then there is using the image within the h1 tag and using the alt attribute for accessibility and SEO purposes. Any recommendations?

  • 2 Contributors
  • 1 Reply
  • 117 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

Good principle: keep a real, semantic H1 for the site or page title and treat the visual logo as decoration. That preserves accessibility and gives search engines meaningful heading text. ’s options are all workable, but the safe pattern is: H1 contains the site name (visible to assistive tech and search engines), and the logo image is added purely for visual presentation.

A simple, modern pattern:

<header>
  <h1 class="site-title">
    <span class="sr-only">Example Site Name</span>
    <img src="/images/logo.svg" alt="" aria-hidden="true">
  </h1>
</header>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

Notes and why this works: the visible text is present in the DOM for SEO and screen readers; the logo image has an empty alt and aria-hidden="true" because it’s decorative. If the graphic actually conveys content (a wordmark that must be read), include that text in the H1 (not only in alt). Avoid tricks that hide meaningful text purely for ranking—Google’s guidance flags that as hidden text (). For when to use alt versus decorative markup, see the W3C decision tree (WAI Images decision tree) and MDN’s notes on alt (MDN: img alt attribute).

Extra tips: use SVG (or srcset) for crisp, responsive logos; keep the H1 concise and unique per page; and follow an accessible “sr-only” pattern rather than crude hacks that remove text from the accessibility tree. This aligns with ’s caution about hiding text while giving a robust, future-proof solution.

Member Avatar for Kraai

Hi

This is a sort of tricky question, because there are ways to hide the text behind the image, and it is not sure what way is the best for SEO, without being frowned upon as spamming.

Some will argue that using the alt text method for the image is good enough and the safest way not to get blacklisted by search engines like google, and some will argue that the alt text is not the ultimate SEO method in your header, but only assist screenreaders used by visually impared people.

I would reccomend avoiding any method that have a negative value on the text, like fontsize: -200em or even 0em or similar to hide text.

is a good read how Google sees this.

I think, the best way, is to have normal text behind the image, that can be read by a site visitor if their images, javascript etc is turned of. This can be done via CSS USING THE <SPAN> tag, something more or less like this:

h1 {
position: relative;
width: (Image width here);
height: (Image height here);
}

h1 span {
position: absolute;
display: block;
width: (Image width here);
height: (Image height here);
left: 0;
top: 0;
background-image: url(logo.png);
cursor: pointer;
}

When images are turned off in a browser, text will display in its place.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.