0

I'm designing a WordPress post template where I have more than one section on the page each section has a picture as it's main heading.

my question here is what is the best practice to implement this without affecting SEO since I'm replacing the H2 tag with an image?

I'm considering doing one of these solutions

<h2><img src="---" alt="the second section title"></h2>

or like this

<h2 style="display:none">the second section title</h2> 
<img src="---" alt="the second section title">

which one is better? and is their any better solution to approach this?

Summary

the first option seems to be better since Alt text does not count as "hidden text" if it accurately describes the image, which is that in my case.

as for the second option it's not suggested since it might violate google hidden text and links guidelines and it's semantically incorrect since it will be considered part of the section content while the image represent the section title.

Improve this question
7
  • 1
    Is it a picture with fancy text, a photograph, a drawing, or something else?
    – Stephen Ostermiller ♦
    Jun 4, 2020 at 15:27
  • Your first idea, the image is the heading for that section. In your second idea, the text is the heading and the image is just another part of the section. Think about that. Is your image really a heading?
    – Rob
    Jun 4, 2020 at 16:31
  • @StephenOstermiller Yes it's a fancy representation for the title here a sample
    – Omar Bishtawi
    Jun 4, 2020 at 20:45
  • @Rob yes my image shall be placed in place of the heading and it should be considered as the title of the section not part of the section content.
    – Omar Bishtawi
    Jun 4, 2020 at 20:47
  • 1
    @ICap the problem, if I followed this approach, can I be certain that the text will always be in its correct position compared to the background.so I dropped this approach because I feared that the text might overflow out of the image. because of different factors like different screen resolution or the font failed to load for whatever reason which might cuse the text to go out of the image or be out of the place.
    – Omar Bishtawi
    Jun 5, 2020 at 15:18

1 Answer 1

Reset to default
1

I'm assuming that your image consists of stylized text of your second section title. Basically, that the image is the heading, itself.

In that case the first idea is better. Google, at least, is smart to things being hidden by CSS anyways.

And in the second idea, the img is not part of the heading itself, which isn't semantically correct.

Improve this answer
6
  • so in the first case, Google will detect the image alt text as the H2 tag text ? or it will consider the H2 tag as an empty tag and consider the page without any H2 tag?
    – Omar Bishtawi
    Jun 4, 2020 at 20:51
  • Correct. When Google crawls the page as text, it should read the alt text of the image and interpret it as the H2 text content. You can double check this after Google crawls it by viewing the cached page in Google and clicking "Text-only Version".
    – Maximillian Laumeister ♦
    Jun 4, 2020 at 21:02
  • The trouble is that if you try to get too tricky about showing different content to Google than to your users, you might go against Google's hidden text and links guideline, which while it probably won't hurt you, probably can't help either.
    – Maximillian Laumeister ♦
    Jun 4, 2020 at 21:04
  • I'm setting the alt text to be exactly as the text in the image .and my main concern of implementing this as what you just mentioned. so is it better to just remove the H2 tag and list the image directly to be on the safe side since H2 tag existence doesn't really affect the SEO ranking but help google organize the content. or go with the first solution since I'm not hiding anything and the text inside the image is the same as the alt text ?
    – Omar Bishtawi
    Jun 4, 2020 at 21:51
  • 1
    Many Thanks for your help
    – Omar Bishtawi
    Jun 4, 2020 at 22:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.