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.

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 = |
  }
}

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" />
  }
}

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

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: 20/09/2018 20:25
  • von Thomas Berscheid