Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | typoscript_head_setup [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== 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 | ||
+ | robots = INDEX, | ||
+ | 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 ===== | ||
+ | |||
+ | ==== Facebook Open Graph und Twitter Cards einbinden ==== | ||
+ | |||
+ | |||
+ | 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 = |< | ||
+ | } | ||
+ | | ||
+ | ## Open Graph TITLE | ||
+ | 20 = TEXT | ||
+ | 20 { | ||
+ | field = subtitle // title | ||
+ | noTrimWrap = |<meta property=" | ||
+ | } | ||
+ | | ||
+ | ## Open Graph DESCRIPTION | ||
+ | 25 = TEXT | ||
+ | 25 { | ||
+ | field = description // subtitle // title | ||
+ | noTrimWrap = |<meta property=" | ||
+ | } | ||
+ | | ||
+ | ## Open Graph URL | ||
+ | 30 = TEXT | ||
+ | 30 { | ||
+ | htmlSpecialChars = 1 | ||
+ | typolink { | ||
+ | parameter.data = TSFE:id | ||
+ | returnLast = url | ||
+ | } | ||
+ | wrap = <meta property=" | ||
+ | } | ||
+ | | ||
+ | 40 = TEXT | ||
+ | 40.wrap = <meta property=" | ||
+ | | ||
+ | 45 = TEXT | ||
+ | 45.wrap = <meta property=" | ||
+ | | ||
+ | ## META Canonical tag | ||
+ | 50 = TEXT | ||
+ | 50 { | ||
+ | htmlSpecialChars = 1 | ||
+ | typolink { | ||
+ | parameter.data = TSFE:id | ||
+ | returnLast = url | ||
+ | } | ||
+ | wrap = <link rel=" | ||
+ | } | ||
+ | | ||
+ | 55 = TEXT | ||
+ | 55.wrap = <meta name=" | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | | ||
+ | ==== Font Awesome mit preload einbinden ==== | ||
+ | |||
+ | 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, | ||
+ | |||
+ | page { | ||
+ | headerData { | ||
+ | 10 = TEXT | ||
+ | 10.wrap = < | ||
+ | rel=" | ||
+ | href="/ | ||
+ | as=" | ||
+ | crossorigin> | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | In diesem Fall ist die Datei für Font Awesome in einer Provider Extension abgelegt und wird lokal geladen. | ||
+ | ==== Google Fonts mit preload einbinden ==== | ||
+ | |||
+ | Google Fonts lassen sich ebenfalls für einen verbesserten Datenschutz und weniger Netzwerkzugriffe lokal speichern. Um ein Vorladen der Dateien zu ermöglichen, | ||
+ | |||
+ | page { | ||
+ | headerData { | ||
+ | 20 = TEXT | ||
+ | 20.wrap = < | ||
+ | rel=" | ||
+ | href="/ | ||
+ | as=" | ||
+ | crossorigin> | ||
+ | } | ||
+ | } | ||
+ | |||
+ | Mehr Informationen zu den Optionen für das Laden des '' | ||
+ | |||
+ | <WRAP admonition note> | ||
+ | Note! | ||
+ | </ | ||
+ | |||
+ | <WRAP left info 100%> | ||
+ | [[https:// | ||
+ | </ | ||
+ | | ||
+ | ===== Canonical Link erzeugen ===== | ||
+ | |||
+ | |||
+ | |||
+ | 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=" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | 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. | ||
+ | |||
+ | ===== Canonical Link abschalten ===== | ||
+ | |||
+ | 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, | ||
+ | |||
+ | 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(' | ||
+ | call_user_func( | ||
+ | function() | ||
+ | { | ||
+ | unset($GLOBALS[' | ||
+ | } | ||
+ | ) | ||
+ | ===== 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: | ||
+ | css10.media = all | ||
+ | | ||
+ | ## Google Fonts | ||
+ | css20 = https:// | ||
+ | css20 { | ||
+ | external = 1 | ||
+ | media = all | ||
+ | } | ||
+ | | ||
+ | ## CSS Accordions und andere jQuery | ||
+ | css30 = EXT: | ||
+ | css30.media = all | ||
+ | | ||
+ | ## CSS Slider vom Hersteller | ||
+ | css40 = EXT: | ||
+ | css40.media = all | ||
+ | | ||
+ | ## CSS gesamte Webseite | ||
+ | css70 = EXT: | ||
+ | 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: | ||
+ | file_02 = EXT: | ||
+ | file_03 = EXT: | ||
+ | file_04 = EXT: | ||
+ | file_05 = EXT: | ||
+ | } | ||
+ | } | ||
+ | |||