: How do I get keywords indexed when text is so complexly styled that words are broken up? I was required to implement a web page that has sections where each has a designed title. Basic structure

@Nimeshi995

Posted in: #Html #Seo

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:


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

Vote Up Vote Down

Login to post a comment!