Snippet Menu ( Click here to hide )

 / typo3wizard.com / Snippets / TYPO3 SEO / Suchmaschinenfreundliche grafische Überschriften

Suchmaschinenfreundliche grafische Überschriften in TYPO3

Übermittlung Ihrer Stimme...
Bewertungen: 3.0 von 5. 1 Stimme(n).
Klicken Sie auf den Bewertungsbalken, um diesen Artikel zu bewerten.

In TYPO3 lassen sich grafische Überschriften mit Hilfe des GIFBUILDERS ganz einfach erstellen. Der einzige Nachteil ist, dass diese grafischen Überschriften von Suchmaschinen nicht gelesen werden können. Hier ein paar Tipps, um die grafischen Überschriften etwas Suchmaschinen optimierter zu gestalten.

Im folgenden Snippet wird die grafische Überschrift als Hintergrund für den H1 Tag verwendet. Innerhalb des H1 Tags wird ein Span mit der Text Überschrift eingefügt, welcher über CSS ausgeblendet wird.

 

lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
  1=IMG_RESOURCE
  1{
    stdWrap.dataWrap = <h1 style="background-image:url(|)"><span>{current:1}</span></h1>
    file = GIFBUILDER
    file {
      format=png
      XY = [10.w]+5,35
       
      backColor = #ffffff
      10 = TEXT
      10 {
        text.current = 1
        fontSize = 22
        offset = 0,20
        fontFile = fileadmin/fonts/AVENLTSL.TTF
        fontColor = #000000
        niceText = 1
      }
    }
    stdWrap.if.isTrue.field=header
  }
  2=TEXT
  2.current=1
  2.fontTag=<h2>|</h2>
  3=TEXT
  3.current=1
  3.fontTag=<h3>|</h3>
  4=TEXT
  4.current=1
  4.fontTag=<h4>|</h4>
  5=TEXT
  5.current=1
  5.fontTag=<h5>|</h5>
  setCurrent {
    field=header
    htmlSpecialChars=1
    typolink.parameter.field=header_link
  }
   
  key.field=header_layout
  key.ifEmpty=1
  key.ifEmpty.override.data=register:defaultHeaderType
}

 

Und hier noch das passende CSS:

 

h1 {
    font-size: 15px;
    color: #000000;
    height: 35px;
    background-repeat: no-repeat;
}

h1 img {
    margin-right: 7px;
}

h1 span{
    display: none;
}


Comments


Alex, 12-05-10 08:35:
Alternativ ist auch ein negativer text-indent möglich, dann müsste man auf den span-Tag verzichten können:

h1 {
text-indent: -5000px;
}
APHRODIZIA, 30-07-10 10:11:
Vielen Dank! Und kleiner Tipp:
Wenn Du ein &-Zeichen in der Überschrift hast, wird das als &amp; in der Grafik ausgegeben. Wenn Du die Konvertierung ganz abschaltest, ist die Seite nicht mehr valide. Deswegen habe ich das hier eingebaut:

...
10 {
text.current = 1
text.HTMLparser = 1
text.HTMLparser.htmlSpecialChars = -1
fontSize = 22
...

Ich hab das ganze hier im Einsatz:
http://www.aphrodizia.com/de/

Kommentar hinzufügen

* - Pflichtfeld

*



*
*

Top 10 Updates

Nützliche Links geändert am  24-Apr-2013 06:31:02
Login geändert am  09-Sep-2010 09:31:35
Schöne Schriften mit Google Font API geändert am  20-Mai-2010 14:36:59
TS basierte Searchbox für Indexed Search geändert am  18-Mai-2010 16:26:54
TYPO3 SEO geändert am  30-Apr-2010 07:43:20
Suchmaschinenfreundliche grafische Überschriften in TYPO3 geändert am  30-Apr-2010 07:33:56
Erstellen eines einfachen Infocenters mit TYPO3  geändert am  17-Nov-2009 11:11:22
Funktionierendes Section Menu mit TemplaVoila geändert am  05-Mai-2009 10:42:40
"Nicht im Menü" in Sitemap anzeigen geändert am  05-Mai-2009 10:12:24
Implementation des DHTML Menüs von brainjar.com  geändert am  01-Feb-2009 13:01:36

Latest comments

22-Apr-2016 07:20:42
Stephan schrieb: Perfekt wäre es, wenn man dieses Beispiel für TYPO3 7.x ummünzen könnte.
Einfache Bildergalerie aus dem media Feld
12-Apr-2016 17:05:49
Peter schrieb: habs... Einfach noch 10.renderObj.header.10 = 10.renderObj.textpic.10 = ...
Andere Formatierung für erstes Element in TYPO3
12-Apr-2016 16:36:46
Peter schrieb: Wunderbar, auch wenn der Eintrag schon nen bisschen älter ist... .. klappt soweit T3...
Andere Formatierung für erstes Element in TYPO3
English
Suche: