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

Die Einbindung von Font Awesome bietet eine Erweiterung des Layouts der Webseite und hat sich als quasi-Standard für Webseiten etabliert. Um mehr Datenschutz für die Webseite zu gewährleisten, kann man die Dateien für den Browser lokal hosten. Damit man das Laden der Sourcen beschleunigen kann, bietet sich außerdem die Option eines Preload an. Der TypoScript Code dazu kann wie folgt aussehen:

page {
  headerData { 
    10 = TEXT
    10.wrap = <link 
      rel="preload" 
      href="/extension/Resources/Public/css/fonts/fa-regular-400.woff2" 
      as="font" 
      crossorigin>
  }
}

In diesem Fall ist die Datei für Font Awesome in einer Provider Extension abgelegt und wird lokal geladen.

Google Fonts lassen sich ebenfalls für einen verbesserten Datenschutz und weniger Netzwerkzugriffe lokal speichern. Um ein Vorladen der Dateien zu ermöglichen, können wir einen solchen TypoScript Code nutzen:

page {
  headerData { 
    20 = TEXT
    20.wrap = <link 
      rel="preload" 
      href="/extension/Resources/Public/css/Google/fonts/ihr-font-latin.woff2" 
      as="font" 
      crossorigin>
  }
}

Mehr Informationen zu den Optionen für das Laden des Font, den Preload und die crossorigin Option bietet das Developer Netzwerk von Mozilla:

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.

TYPO3 baut seit der Version 9.5 immer einen Canonical Link für die Webseite auf. Dies gilt auch für Extensions. Wenn wir, wie im Absatz zuvor geschildert, aber einen eigenen Canonical Link erzeugen möchten, dann sollten wir diesen für die Inhalte der Erweiterung abschalten.

Dazu können wir in die PHP Datei ext_localconf.php im Stammverzeichnis unserer Extension gehen und den Canonical Link deaktivieren. Der Quellcode sieht dann wie folgt aus:

<?php
defined('TYPO3_MODE') || die('Access denied.');
call_user_func(
  function()
  {
    unset($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['TYPO3\CMS\Frontend\Page\PageGenerator']['generateMetaTags']['canonical']);
  }
)

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