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>
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.