3

What do you think about having the same content for H1 and H2 tag in the article? It seems like keyword stuffing, right? Example:

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<h2>Bananas <span>Musa × paradisiaca</span></h2>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

Do you think this is a bad practice? This is how graphic layout is made for a page so the title should repeat itself (there is a tall image between them), and I'm wondering if it would be better to have markup something like this (in this case <p>), but styled as so it looks like h2.

Would you suggest something else instead of <p> which better suits a title consisted of a 2-3 words? This is a purely design based idea and I wouldn't even mind telling search engines to not index this line.

<h1>Bananas <span>Musa × paradisiaca</span></h1>

<p class="h2">Bananas <span>Musa × paradisiaca</span></p>

<h2>Description</h2>  
<p>Bananas are long and yellow. Bananas are long and yellow.</p>

<h2>Taste</h2>  
<p>Bananas are delicious. Bananas are delicious. Bananas are delicious.</p>

(Span has a display: block set so that it goes to next line)

  • That's a lot of questions! It appears you're looking for SEO advice - it might help if you read up on the subject of on-page SEO. I recommend starting here: upcity.com/blog/ultimate-guide-developing-actionable-seo-audit – L Martin Jun 6 '16 at 10:04
  • Both examples are terrible! Search is not about keywords and stuffing them in anywhere you can. It is about whole language. Write naturally for people and not machines. The more thoroughly you write about a topic the better. Your keyword repetition is disastrous and will fail miserably. – closetnoc Jun 6 '16 at 12:21
  • The text inside paragraph is only lorem ipsum kind of example... I am asking for advice with what html tag should I enclose the second text so that it doesn't seem like a mere duplicate. For example it would be interesting to have something like display: none which works inversely, so that it is visible to a human, but to a bot it isn't... – Boris Kozarac Jun 6 '16 at 12:57
3

Don’t use another heading element for the duplicated content. Headings (h1-h6) serve various purposes (generating the document outline, navigation for screen reader users, etc.). A duplicated heading is useless and can be bothersome or lead to confusion.

Using a different element and styling it according to your intended design is the correct way. Using p for this seems to be appropriate; otherwise the meaningless div.

To make clear that this text is not part of the section’s main content, you could use the header element to group the heading, the duplicated heading text, and the image (assuming that the image is also part of the header).

To make clear that the duplicated text is not relevant, and only serves an aesthetic purpose, you can use the WAI-ARIA presentation role.

So your section would contain:

<header>
  <h1>Bananas <span>Musa × paradisiaca</span></h1>
  <img src="tall-image.png" alt="" />
  <p role="presentation">Bananas <span>Musa × paradisiaca</span></p>
</header>

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.