TYPO3 9.5 – OG-Tags für Datensätze aus eigener Extension

Seit dem TYPO3 der 9er Serie gibt es die TYPO3-Core Extension "SEO". Das ist ein weiterer Schritt der Community in Richtung Unabhängigkeit von Third-Party Extensions für allgemeine und systemrelevante Aufgaben.

Die Extension ist nicht vorinstalliert, sondern muss manuell über das Modul Erweiterungen installiert werden. Ist das getan, erhält man im Dialog der Seiteneinstellungen die zusätzlichen reiter "SEO" und "Soziale Medien". Unter dem Reiter "Soziale Medien" findet man unter Anderem die Eingabefelder für die OG:Tags über die Inhalte bei Facebook ausgespielt werden können.

Einmal ausgefüllt, ein passendes Bild eingefügt und gespeichert, dann werden die entsprechenden OG:Tags auch schon im Header der Seite im Quellcode ausgespielt.

Und bei Detailansichten von Datensätzen einer eigenen Extension?

Die Detailansichten von Datensätzen, wie z.B. der News Extension werden zumeist auf einer Seite angezeigt. Natürlich kann man für diese Detail-Seite OG:Tags definieren, die sind dann aber für alle angezeigten Datensätze gleich. An der Stelle kam kundenseits der Wunsch auf, dass die angezeigten OG:Tags aber den Datensatz der Extension abbilden sollen und die Seitenspezifischen ersetzen - hier im Speziellen waren es Produktdatensätze.

Da die OG:Tags über TypoScript ansprechbar sind, favorisierten wir hier auch eine Lösung mit TypoScript. Als Erstes mus das TCA des Datenbanktabelle der Extension um weitere Eingabefelder erweitert werden. Das wären "ogtitle", "ogdescription" und "ogimage". Die ersten Beiden sind gewöhnliche Standardeingabefelder vom Typ - "input". Die Konfiguration des "ogimage" ist etwas erweitert, gegenüber der Standardkonfiguration. Die Crop-Funktion übernehmen wir aus dem TCA der "SEO" Extension, damit wird im Crop-Fenster bereits das korrekte Format angezeigt:

...
openGraphCropConfiguration = [
    'config' => [
        'cropVariants' => [
            'default' => [
                'disabled' => true,
            ],
            'social' => [
                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop_variant.social',
                'coverAreas' => [],
                'cropArea' => [
                    'x' => '0.0',
                    'y' => '0.0',
                    'width' => '1.0',
                    'height' => '1.0'
                ],
                'allowedAspectRatios' => [
                    '1.91:1' => [
                        'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.191_1',
                        'value' => 1.91 / 1
                    ],
                    'NaN' => [
                        'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                        'value' => 0.0
                    ],
                ],
                'selectedRatio' => '1.91:1',
            ],
        ],
    ],
];
...

Und fügen die Crop-Konfiguration in die Konfiguration des OG:image ein:

...
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
                'ogimage',
                [
                    'appearance' => [
                        'createNewRelationLinkTitle' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference'
                    ],
                    'overrideChildTca' => [
                        'types' => [
                            \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
                                'showitem' => '
                            --palette -;LLL:EXT:lang/Resources/Private/Language/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
                            --palette--;;filePalette'
                            ],
                        ],
                        'columns' => [
                            'crop' => $openGraphCropConfiguration
                        ]
                    ],
                    'maxitems' => 1
                ],
                $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
            ),
...

Das OG:Tag soll nur geändert werden, wenn ein Produkt angezeigt wird, daher fragen wir mit einer Condition ab, ob der Parameter in der URL vorkommt. Da TYPO3 zunehmend Symfony Komponenten verwendet, hat sich die entsprechende Condition geändert:

[request.getQueryParams()['tx_<Ext>_<Action>']['<Parameter>'] > 0]
  ...
[global]

Falls diese Situation eintrifft, wird der zugeörige Datensatz aus der Datenbank geholt und die benötigten Inhalte in ein Register geschrieben:

...
temp.ogproduct = COA
temp.ogproduct {      
    50 = CONTENT
    50 {
       table = tx_<ext>_domain_model_<bezeichnung>
       ### Hole Produkt mit URL-Parameter
      select {
          pidInList = 57
          languageField = sys_language_uid
          uidInList.data = GP:tx_<ext>_<action>|<parameter>
      }
      ### TAGS rendern
      renderObj = COA
      renderObj {
          10 = LOAD_REGISTER
          10 {
              OGTITLE.cObject = TEXT
              OGTITLE.cObject.field = ogtitle
          }
          20 = LOAD_REGISTER
          20 {
              OGDESC.cObject = TEXT
              OGDESC.cObject.field = ogdescription
          }
          30 = LOAD_REGISTER
          30 {
              OGIMAGE.cObject = FILES
              OGIMAGE.cObject {
                  references {
                      table = tx_dhu_domain_model_products
                      uid.data = tx_dhu_domain_model_products:uid
                      fieldName = ogimage
                  }
                  ### OG Bild rendern
                  renderObj = TEXT  
                  renderObj {
                      typolink{
                          parameter {
                              stdWrap {
                                  cObject = IMG_RESOURCE
                                  cObject{
                                      file {
                                          import.data = file:current:uid
                                          treatIdAsReference = 1
                                      }
                               }
                           }
                       }
                       returnLast = url
                       forceAbsoluteUrl = 1
                   }
               }
            }
         }
      }   
   }
}
...

In einem letzten Schritt werden die vorhandenen OG:Tags auf der Seite überschrieben:

...
page.2000 < temp.ogproduct
### Einfügen
page.meta {
    og:title.dataWrap = |{register:OGTITLE}
    og:title.attribute = property
    og:title.replace = 1

    og:description.dataWrap = |{register:OGDESC}
    og:description.attribute = property
    og:description.replace = 1

    og:image.dataWrap = |{register:OGIMAGE}
    og:image.attribute = property
    og:image.replace = 1

    og:image:url.dataWrap = |{register:OGIMAGE}
    og:image:url.attribute = property
    og:image:url.replace = 1
}
...

PHP - MetagTagManager, Extbase-Extension

Wenn man den Weg über TypoScript nicht gehen möchte, gibt es für das Ausspielen der OG:Tags eine MetaTag Api, die man im Controller einer Extbase-Extension verwenden kann und zusätzlich die Möglichkeit bietet eigene MetaTagManager zu programmieren. Hierzu die folgenden Links, die das Vorgehen beschreiben:

  1. https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/MetaTagApi/Index.html#using-the-meta-tag-api
  2. https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/PageTitleApi/Index.html
  3. https://www.cmstypo3.sk/fileadmin/cmstypo3/user_upload/img/Wiki/typo3-v9-lts/TYPO3-v9-LTS-whats-new.english.pdf


Erstellt: 23.01.2020

Vielen Dank für Ihr Interesse.
Bei Fragen zu TYPO3, Programmierung oder Upgrades stehen wir Ihnen gerne zur Verfügung. -> Kontakt