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  = 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 =====
 +
 +==== 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 = |<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" />
 +    }
 +  }
 +  
 +  
 +==== 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, 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 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, 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:
 +
 +<WRAP admonition note>
 +Note!
 +</WRAP>
 +
 +<WRAP left info 100%>
 +[[https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content|Mozilla Developer Network]]
 +</WRAP>
 +  
 +===== 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="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.   
 +
 +===== 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, 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']);
 +    }
 +  )
 +===== 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
 +    }
 +  }
 +