When you want to use an exotic font you’ll always end up with SEO problems. Ofcourse there is SIFR but this requires flash and there are still a lot of big companies who won’t allow flash on their computers. And even though you can set alt and titles attributes for graphical headers using TypoScript, a text header is always better for SEO.

Here’s a bit of TypoScript which produces both a graphical and a text header for the same single content element. You can display the graphical header and hide the text header using css (for example: indent: -9999). This way users will experience the nice graphical header while search engines will still be able to crawl the text header. We’ll give the text-header a H2 attribute so the importants is obvious to the search engine.

This snippets produces a H2 header with the same headertitle for both the graphical header as the text header:

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		wrap = <span>|</span>
                file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap = <h2 class="headerDesc">|</h2>
                field = header
	}
}

Maybe you would like to have a different alt and title text with the graphical header instead of the actually image text and also want this different text to show in your text-header. Since TYPO3 has no extra BE-field for this issue, you should use “Text and Image” instead of “Text”. This way you’ll have more BE-fields you can use. In this example I’ll use the “Long URL Description” field to define our alt, title and text-header content.

lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
	10 = IMAGE
	10 {
   		alttext.field = longdescURL
   		titleText.field = longdescURL
   		wrap =  <span>| </span>
   		file = GIFBUILDER
   		file {
   			XY = [10.w]+1,60
   			backColor = #ffffff
   			transparentBackground = 1
   			10 = TEXT
   			10 {
   				text.field = header
   				text.current = 1
   				fontSize = 52
   				offset = 0,50
   				fontFile =  path/to/your/font.ttf
   				fontColor = #000000
   				niceText = 1
    			}
   		}
   	}
	20 = TEXT
	20 {
		wrap =  <h2 class="headerDesc">|</h2>
  		field = longdescURL
	}
}

I hope this will be useful. If you have any questions or comments please don’t hesitate…