H2 first

Kleine Verbesserung mit großer Wirkung

Der richtige Einsatz von Überschriften ist für die Strukturierung von Internetseiten ein wichtiges Instrument. Auch für die Bewertung der Seite durch Suchmaschinen ist der korrekte Einsatz von Überschriften essentiell: Die stärkste Überschrift, die H1, sollte genau ein Mal auf jeder Seite vorkommen. Der weitere Text wird über die Überschriften H2 bis H6 strukturiert und gewichtet. H steht dabei für Headline und die Zahl gibt die Wichtigkeit an - je kleiner desto wichtiger.

Auch im CMS Contao hat der Redakteur die Möglichkeit, den Text mit Überschriften zu strukturieren. Von der Möglichkeit, Überschriften im Inhaltselement "Text" zu definieren, raten wir üblicherweise ab. Besser ist die Nutzung des Inhaltselementes "Überschrift". Die Auswahlmenüs für die Überschrift ist dabei nach ihrer Stärke absteigend sortiert: von H1 bis H6, wobei die H1-Überschrift im entsprechenden Inhaltselement vorausgewählt ist. Der Redakteur wird bei seiner Arbeit in der Regel nicht immer so genau darauf achten, welche Überschrift ausgewählt ist und wählt daher häufig die H1. Und das ist wiederum keine gute Strukturierung der Inhalte.

Diese semantischen "Fehler" lassen sich relativ schnell und einfach beheben. Und zwar so, dass die tägliche Arbeit des Redakteurs dabei nicht gestört wird. Natürlich muss eine Anpassung an der Contao-Funktionalität so umgesetzt werden, dass die Änderung updatesicher ist und der Workflow nicht grundlegend geändert wird.

Diese Anpassungen lassen sich mit ein paar Zeilen Konfiguration erledigen.

Komfortabel als kleine Erweiterung

Diese Konfiguration lässt sich leicht über eine kleine Erweiterung ins System bringen: Entpacken Sie einfach die ZIP-Datei in Ihre Contao-Installation in den Ordner "system/modules" und führen die Systemwartung (wie weiter unten beschrieben) aus. Hier werden die Änderungen als "Erweiterung" zusammengefasst. Damit sind beide Inhaltselemente angepasst und auf jeden Fall updatesicher.

Die Erweiterung haben wir getestet mit Contao 3.3.7 bis Contao 3.5.

Erweiterung für Contao 3 (2,4 KiB)

Wie das ganze mit Contao 4 funktioniert erfahren Sie am Ende dieses triloBIT.

Im folgenden erklären wir, was dahinter steckt:

Anpassung des Inhaltselements "Überschrift"

Wenn es die Datei dcaconfig.php noch nicht gibt, legen Sie sie einfach an und fügen folgenden Code ein:

<?php
// Put your custom configuration here

Öffnen Sie die Datei system/config/dcaconfig.php in einem Texteditor. Ergänzen Sie folgende Zeile Code:

<?php
// Put your custom configuration here

$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['options'] = array(
	'h2', 'h3', 'h4', 'h5', 'h6', 'h1'
);

Mit diesem Code wird die Werteliste für das Inhaltselements "Überschrift" neu sortiert. Natürlich können Sie hier auch Überschriften herauslöschen, damit diese erst gar nicht verwendet werden.

Neue tinyMCE Konfiguration erstellen

Sollten Sie oder Ihre Redakteure Überschriften im Inhaltslement "Text" nutzen, hilft folgendes: Im Verzeichnis system/config findet sich die Datei tinyMCE.php. Diese regelt die Auswahlmöglichkeiten des WYSIWYG-Editors von Contao, aber auch die Auswahl der Reihenfolge der Überschriften. Diese einfach kopieren und z.B. als tinyMC_custom.php ablegen.

In der neuen Datei ergänzen Sie jetzt folgende Codezeilen - am besten nach diesem Block:

templates: [
	<?php echo Backend::getTinyTemplates(); ?>
],

style_formats: [
	{title: "Headers", items: [
		{title: "Header 2", format: "h2"},
		{title: "Header 3", format: "h3"},
		{title: "Header 4", format: "h4"},
		{title: "Header 5", format: "h5"},
		{title: "Header 6", format: "h6"},
		{title: "Header 1", format: "h1"}
	]},
	{title: "Inline", items: [
		{title: "Bold", icon: "bold", format: "bold"},
		{title: "Italic", icon: "italic", format: "italic"},
		{title: "Underline", icon: "underline", format: "underline"},
		{title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
		{title: "Superscript", icon: "superscript", format: "superscript"},
		{title: "Subscript", icon: "subscript", format: "subscript"},
		{title: "Code", icon: "code", format: "code"}
	]},
		{title: "Blocks", items: [
		{title: "Paragraph", format: "p"},
		{title: "Blockquote", format: "blockquote"},
		{title: "Div", format: "div"},
		{title: "Pre", format: "pre"}
	]},
		{title: "Alignment", items: [
		{title: "Left", icon: "alignleft", format: "alignleft"},
		{title: "Center", icon: "aligncenter", format: "aligncenter"},
		{title: "Right", icon: "alignright", format: "alignright"},
		{title: "Justify", icon: "alignjustify", format: "alignjustify"}
	]}
],

Dieser Codeblock überschreibt die Standardeinstellungen des tinyMCE. Wir haben hier die Reihenfolge der Überschriften dahingehend geändert, dass die Überschrift H1 an das Ende der Liste verschoben wird.

Einbinden der neuen tinyMCE Konfiguration

Jetzt muss nur noch die neue tinyMCE Konfiguration dem System bekannt gemacht werden.
Hierzu muss eine weitere Zeile Code in die Datei system/config/dcaconfig.php eingebunden werden.

Ergänzen Sie folgende Zeile Code für die neue Konfiguration des tinyMCE:

GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_custom';
// tinyMCE_custom: Name der gerade angelegten Datei ohne Dateiendung

Zum Schluss sollten Sie noch die Systemwartung ausführen, damit die neue Konfiguration auch greift. Wählen Sie hierzu unter "System > Systemwartung" den Punkt "Internen Cache leeren" aus und klicken Sie auf "Daten bereinigen". Jetzt sind die beiden Änderungen verfügbar. Bei Contao-Updates müssen Sie darauf achten, dass die Datei dcaconfig.php nicht "verloren" geht.

Contao 4

Hier ist das Vorgehen nahezu identisch. Um das Inhaltselement "Überschrift" anzupassen öffnen Sie die Datei system/config/dcaconfig.php in einem Texteditor. Ergänzen Sie folgende Zeile Code:

<?php
// Put your custom configuration here

$GLOBALS['TL_DCA']['tl_content']['fields']['headline']['options'] = array(
	'h2', 'h3', 'h4', 'h5', 'h6', 'h1'
);

Die Einbindung des tinyMCE hat sich leicht geändert. Die Konfiguration bzw. dessen Einbindung ist jetzt auch hier über ein Template geregelt. Dieses verhält sich wie alle anderen Templates in Contao: Die System-Templates können durch eine individuelle Versionen im Ordner "templates" überschrieben werden. Anbei die neue tinyMCE-Konfiguration "be_tinyMCE.html5" für Contao 4.

tinyMCE -Template für Contao 4 (1,1 KiB)

Hilfe

Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung. Nutzen Sie einfach unser Kontaktformular.

Wir engagieren uns gerne und unentgeldlich für die Contao-Community. Am liebsten ist es uns, wenn wir durch unser Beispiel andere dazu motivieren sich ebenfalls einzubringen. Sollte Ihnen das aber nicht möglich sein, dann freuen wir uns auch über eine kleine Spende für unsere Arbeit. Auch das motiviert uns weiter zu machen.

Für diese Erweiterung spenden

Diese Erweiterung hat Ihnen gefallen und Sie nutzen sie auch in Ihren Kundenprojekten? Hier können Sie uns unterstützen.

Spenden Sie uns gerne etwas per Überweisung auf folgendes Konto. Wenn Sie eine Rechnung benötigen, kontaktieren Sie uns bitte vorher:

BIC: GENODEF1ETK
IBAN: DE77 8309 4495 0003 2066 02
Verwendungszweck: Spende Contao-Erweiterung