0

Suppose you have a page that displays a large comic image. For the human user, the comic image already contains the text that is to be put in h1 (the title of the comic). UX-wise, displaying this content is unnecessary and disruptive.

(Cutting out a piece of image to display it inside h1 with alt text is not possible because the image should exist as a single entity for the purposes of redistribution.)

What is the semantically correct way to let search engines know about the contents of h1 without compromising user experience?

Option 1 (include but do not display h1):

<article id="todays-comic">
    <h1 style="display: none;">Sandwich</h1>
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
</article>

Problems:

  • for a long time has been considered very bad practice SEO-wise,
  • there is no way to let the engines know of our good intentions.

Option 2 (hide h1 under image):

<article id="todays-comic" style="position: relative;">
    <h1 style="position: absolute; top: 0; z-index: 1;">Sandwich</h1>
    <figure>
        <img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
</article>

Problems:

  • engines can be smart enough to see that h1 is hidden,
  • and consider that as a more ill-intentioned way to trick them than "display: none;",
  • and there is no way to let the engines know of our good intentions.

Option 3 (put h1 elsewhere and style it):

<article id="todays-comic">
    <figure>
        <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
    </figure>
    <h1 class="small-and-inconspicuous">Sandwich</h1>
</article>

Problems:

  • could still be considered misleading by engines,
  • awkward flow (unless structured traditionally but then relocated with flex order, that could still be considered misleading),
  • still requires display of unnecessary information.

Option 4 (do not include an h1, add it to alt text):

<article id="todays-comic">
    <figure>
        <img style="position: absolute; top: 0; z-index: 2;" src="sandwich-comic.jpg" alt="Sandwich. Comic about making a sandwich.">
    </figure>
</article>

Problems:

  • bad for SEO and semantically lacking: engines no longer understand what the h1 of the section is supposed to be.

Given the situation, what would be the best approach to hiding duplicative h1 content? Are there any better alternatives to these?

obento not ubuntu
  • 41
  • 4
  • What would be wrong for you to use a figcaption / why h1 ? flex or grid to reorder is fine, grid can avoid position too of both element stand in the same grid cell. ... is article only holdind a picture + a title (very short for a stand alone possible content) ? – G-Cyrillus Jan 04 '21 at 16:33
  • @G-Cyrillus Figcaption has the same cons as h1, but none of the pros. Without h1, main content section will have no top-level header at all, which was always considered bad. The main content section will contain a large image, full transcript of text in image, author's comment, tag content, publishing info, relevant nav, user comments. Yes, length of machine-readable content has always been an inherent issue for comics published as images. – obento not ubuntu Jan 04 '21 at 17:26
  • 1
    okay, grid can avoid positionning or display:none : https://codepen.io/gc-nomade/pen/RwGyNXL – G-Cyrillus Jan 04 '21 at 17:45
  • 1
    @G-Cyrillus So essentially, this is Option 2 (hiding one object under another) but more modern and responsive than "position: absolute". I can see how this can also be useful in certain scenarios outside this specific task, thank you. – obento not ubuntu Jan 16 '21 at 17:18

1 Answers1

1

A variant of your second option.

It's important for semantics and accessibility (and therefore SEO) to properly mark up <h1> content if it exists. The <h1> can be hidden for sighted users, but using display: none will make it invisible to assistive technologies and many search engines will ignore it. A better way to hide it would be to take an approach similar to Bootstrap's .sr-only class, which visually hides elements without hiding them from assistive tech.

<article id="todays-comic">
  <h1 class="sr-only">Sandwich</h1>
  <img src="sandwich-comic.jpg" alt="Comic about making a sandwich.">
</article>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Without more context, it's hard to know if the <figure> element is helpful. Additionally, you should consider using aria-describedby on the image to provide a more detailed description of the comic so that people using assistive technologies have a more equitable experience.

Sean
  • 6,873
  • 4
  • 21
  • 46