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.

7
  • 1
    Is it a picture with fancy text, a photograph, a drawing, or something else? – Stephen Ostermiller Jun 4 '20 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 '20 at 16:31
  • @StephenOstermiller Yes it's a fancy representation for the title here a sample – Omar Bishtawi Jun 4 '20 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 '20 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 '20 at 15:18
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.

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 '20 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 '20 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 '20 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 '20 at 21:51
  • 1
    Many Thanks for your help – Omar Bishtawi Jun 4 '20 at 22:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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