2

I was required to implement a web page that has sections where each has a designed title. Basic structure like the following:

<div class="page">
    <div class="section">
        <h1>title section 1</h1>
        section content
    </div>
    <div class="section">
        <h1>title section 2</h1>
        section content
    </div>
</div>

My problem is that the web designer made titles visually complex like the following image: Title design

Note that "SO" and "MOS" in the picture are not two words actually but just one word "SOMOS", but that's the design I was asked to achieve.

I replaced the h1 tags with the following HTML structure for each title

<div class="customH1">
    <div class="quienes">¿QUIENES</div>
    <div class="so">SO</div>
    <div class="mos">MO<span class="underlined">S</span>?</div>
</div>

With this structure and CSS I achieved the design so everything is ok so far. My doubt is about SEO. Remember "SOMOS" word? I don't know if search engines will understand the section title "QUIENES SOMOS" considering it's split in three different DIVs. I don't know if search engines will understand "QUIENES SO MOS", "QUIENES SO MO S" or something else than the real title.

I thought about giving a title attribute to the container DIV but I read it just helps for readability and not for SEO.

I also thought about using an image and give it an ALT attribute because I understand search engines consider ALT attribute only for IMG tags but I don't think that is efficient to use images.

I finally thought about using SVG and giving it a TITLE tag as I read somewhere this helps describe the SVG but I don't know if that helps with SEO.

<svg>
    <title>I don't know if this will help with SEO while having a nice title designed in this SVG</title>
</svg>

Do you have any suggestions to make my designed titles SEO friendly? or may be my current structure will somehow be understood by search engines already?

UPDATE: I just used http://www.seo-browser.com page to crawl my page and I got the following output: "¿QUIENES SO MO S ?" I don't know if it is safe to think Google will do the same. If it does then I need to fix this.

UPDATE: At least with Browseo.net there was a difference when deleting spaces between DIVs

<div class="customH1">
    <div class="quienes">¿QUIENES</div>
    <div class="so">SO</div><div class="mos">MO<span class="underlined">S</span>?</div>
</div>

I hope Google sees it the same way.

1

I think You can wrap all the divs into one h1 tag. My guess is that Google will essentially see it as <h1> ¿QUIENES SO MO </h1> or as <h1>¿QUIENESSOMO</h1>

<div class="customH1">
<h1>    
<div class="quienes">¿QUIENES</div>
<div class="so">SO</div>
<div class="mos">MO<span class="underlined">S</span>?</div>
</h1>
</div>

The client window sees it as:

¿QUIENES SO MOS?

In the end I wouldn't obsess over h1-h3 tags too much. They're a keyword ranking signal but Google has learned how to analyze the content on a page far beyond what it could several years ago and so the h1 tags are likely not as important as they once were. I don't think h1 tags are necessary on a site and a lot of my sites don't even have them, although they would probably give it a slight SEO boost.

  • Thanks! I understand and agree with your H1 point. How did you get "¿QUIENES SO MOS?" I ask because my test with seo-browser.com gave me "¿QUIENES SO MO S?" where "SOMOS" word is split in 3. Either way my problem is that the result should be two words, but "SOMOS" word is split and I guess this will mean something else to search engines. – user2997817 Mar 1 '18 at 20:05
  • I just used the html code in the post and stack overflow rendered it that way. I would trust whatever result you see in your html code tests instead. There are ways to remove the whitespace between divs if you want so mos to be one word. I would run a search on removing space between divs if that's what you're looking for. – Michael d Mar 1 '18 at 20:10
  • You have a great point! I forgot spaces between DIVs "SO" and "MOS". I put them together and I saw no change on seo-browser.com Unfortunately it gave the same output BUT I tried with browseo.net and I got the right word. In Browseo there was a splitting space before putting the DIVs together. So I have two sites with different results but I hope Google behaves more like Browseo. Thanks for the hint! – user2997817 Mar 1 '18 at 22:24
  • I would highly recommend <span> rather than <div> since div is associated with block elements while span is technically more of a styling element. You can have spans appearing on their own line without using <div> by using display: block, see: jsfiddle.net/SimonHayter/rtdhop85 – Simon Hayter Mar 2 '18 at 0:32
  • @SimonHayter thanks for the tip! I was thinking something similar about SPANS minutes ago and I didn't know you could put a SPAN inside another SPAN so I used DIVs instead but you're right! I'll change some CSS to improve. – user2997817 Mar 2 '18 at 4:55

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.