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:
- https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/MetaTagApi/Index.html#using-the-meta-tag-api
- https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/PageTitleApi/Index.html
- 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