Benutzer-Werkzeuge

Webseiten-Werkzeuge


typoscript_head_setup

TypoScript HEAD Setup

TypoScript Code für den Bereich zur Konfiguration einer Webseite. Angaben zur Einbindung von CSS und JavaScript. Steuerung der META-Tags einer Webseite.

Page META Data

Konfiguration der META Angaben zur Darstellung und Ansteuerung von Suchmaschinen.

page {
  meta {
    viewport  = width=device-width, initial-scale=1.0, user-scalable=yes
    robots = INDEX,FOLLOW
    title.field = subtitle
    keywords.field = keywords // subtitle // title
    keywords.ifEmpty = Internetagentur Irma Berscheid-Kimeridze
    keywords.wrap = |
  
    description.field = description // subtitle // title
    description.ifEmpty = Internetagentur Irma Berscheid-Kimeridze
    description.wrap = |
  }
}

Page HEADER Data

Einfügen von TITLE Angaben sowie Einbindung von Tags für Facebook und Twitter.

page {
  headerData { 
    ## TITLE Tag
    10 = TEXT
    10 {
      field = subtitle // title
      noTrimWrap = |<title>|</title>|
    }
      
    ## Open Graph TITLE
    20 = TEXT
    20 {
      field = subtitle // title
      noTrimWrap = |<meta property="og:title" content="|" />|
    }
    
    ## Open Graph DESCRIPTION
    25 = TEXT
    25 {
      field = description // subtitle // title
      noTrimWrap = |<meta property="og:description" content="|" />|
    }
    
    ## Open Graph URL
    30 = TEXT
    30 {
      htmlSpecialChars = 1    
      typolink {
        parameter.data = TSFE:id
        returnLast = url
      }
      wrap = <meta property="og:url" content="https://www.agentur-ibk.de|">
    }
    
    40 = TEXT
    40.wrap = <meta property="og:type" content="article" />
      
    45 = TEXT
    45.wrap = <meta property="og:image" content="https://www.agentur-ibk.de/bild.jpg" />
  
    ## META Canonical tag
    50 = TEXT
    50 {
      htmlSpecialChars = 1    
      typolink {
        parameter.data = TSFE:id
        returnLast = url
      }
      wrap = <link rel="canonical" href="https://www.agentur-ibk.de|">
    }
  
    55 = TEXT
    55.wrap = <meta name="google-site-verification" content="XXXXXXX" />
  }
}

Um eine Extension in TYPO3 mit einem eigenen Canonical Link zu versehen, können Sie das TypoScript Setup Ihrer Extension mit dem HeaderData Objekt erweitern:

page {
  headerData { 
    200 = TEXT
    200 {
      htmlSpecialChars = 1    
      typolink {
        parameter.data = TSFE:id
        returnLast = url
        addQueryString = 1
        addQueryString.method = GET
        forceAbsoluteUrl = 1
      }
      wrap = <link rel="canonical" href="|">
    }
  }
}

Die Parameter des TypoScript Objekts typolink:

parameter.data = TSFE:id

Damit sagen Sie Ihrem TYPO3, dass es sich die Daten für das Frontend zur UID Ihrer Seite auslesen soll

returnLast = url

Liefert die URL der Seite zurück.

addQueryString = 1

Alle Parameter des Links sollen übergeben werden, also auch die einzelnen query Daten einer Extension

addQueryString.method = GET

Die Parameter des Links sollen ausgelesen werden

forceAbsoluteUrl = 1

Damit stellen wir sicher, dass die gesamte Domain mit übergeben wird.

Page includeCSS

Einfügen aller Sourcen für die CSS Dateien der Webseite. Hier wird keine Entscheidung darüber getroffen, ob diese Elemente komprimiert und / oder zu einer Datei zusammengefasst werden sollen. Dieses geschieht in Abhängigkeit von der Umgebung (DEV, PROD, …) im Page Template der Webseite.

page {
  includeCSS {
    ## Bootstrap CSS Datei
    css10 = EXT:ibkprovider/Resources/Public/js/bootstrap/css/bootstrap.min.css
    css10.media = all
    
    ## Google Fonts
    css20 = https://fonts.googleapis.com/css?family=Hammersmith+One
    css20 {
      external = 1
      media = all
    }
    
    ## CSS Accordions und andere jQuery
    css30 = EXT:ibkprovider/Resources/Public/css/theme-1.9.2/jquery-ui-1.9.2.custom.css
    css30.media = all
    
    ## CSS Slider vom Hersteller
    css40 = EXT:ibkprovider/Resources/Public/css/slider/styles/jquery.sliderTabs.min.css
    css40.media = all
  
    ## CSS gesamte Webseite
    css70 = EXT:ibkprovider/Resources/Public/css/ibkcontent.css
    css70.media = all
  }
}

Page includeJS

Einfügen der JavaScript Sourcen für die Webseite. Die Steuerung der Komprimierung der Sourcen und ihre Verlagerung in den Footer der Webseite geschieht über das Page Template.

page {
  includeJSFooterlibs {
    file_01 = EXT:ibkprovider/Resources/Public/js/jquery-3.3.1.min.js
    file_02 = EXT:ibkprovider/Resources/Public/js/jquery-ui-1.9.2.custom.js
    file_03 = EXT:ibkprovider/Resources/Public/css/slider/jquery.slidertabs.min.js
    file_04 = EXT:ibkprovider/Resources/Public/js/ibkfunctions.js  
    file_05 = EXT:ibkprovider/Resources/Public/js/bootstrap/js/bootstrap.min.js
  }
}
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
typoscript_head_setup.txt · Zuletzt geändert: 27/07/2020 20:30 von Thomas Berscheid