TYPO3-Anleitung: So erstellen Sie Ihre eigene Website mit TYPO3

Das bereits im Jahr 2000 ver­öf­fent­lich­te Open-Source-Programm TYPO3 zählt zu den be­lieb­tes­ten Content-Ma­nage­ment-Systemen. Wie richten Sie dieses ein und nutzen es als Basis für Ihre Website?

Was ist TYPO3?

TYPO3, das seit Oktober 2012 offiziell unter dem Namen TYPO3 CMS ver­trie­ben wird, ist ein platt­form­un­ab­hän­gi­ges Content-Ma­nage­ment-System, das ur­sprüng­lich von Kasper Skårhøj ent­wi­ckelt wurde. Es ist in der Skript­spra­che PHP ge­schrie­ben und steht unter der GNU-GPL-Lizenz, was die Mitarbeit der sehr großen Community von Beginn an stark gefördert hat: So stehen mitt­ler­wei­le tausende kos­ten­freie Ex­ten­si­ons von Dritt­an­bie­tern zur Verfügung, mit deren Hilfe sich der Funk­ti­ons­um­fang von TYPO3 beliebig erweitern lässt. Als Datenbank-Ma­nage­ment-System für ein TYPO3-Projekt können Sie alle gängigen SQL-basierten Lösungen wie den Klassiker MySQL oder Al­ter­na­ti­ven wie MariaDB und Post­greS­QL einsetzen.

TYPO3 ein­rich­ten und in­stal­lie­ren: Vor­aus­set­zun­gen und Vor­ge­hens­wei­se

Wenn Sie Ihre eigene TYPO3-Website erstellen wollen, gilt es zunächst, die passenden Hosting-Struk­tu­ren zu schaffen. So benötigen Sie ei­ner­seits ein Hardware-Setup mit genügend Spei­cher­platz und Re­chen­power für das Content-Ma­nage­ment-System inklusive aller ver­wen­de­ten Er­wei­te­run­gen. An­de­rer­seits müssen ein Webserver mit PHP-Un­ter­stüt­zung (z. B. Apache, NGINX oder IIS) sowie eine SQL-Datenbank wie die bereits genannten MySQL, MariaDB oder Post­greS­QL in­stal­liert sein. Für die Kom­mu­ni­ka­ti­on mit dem Webserver benötigen Sie darüber hinaus einen FTP-Client wie FileZilla.

Ent­schei­den Sie sich also im ersten Schritt, ob Sie einen eigenen Server betreiben oder ob Sie TYPO3 und die er­for­der­li­chen Web­pro­gram­me im Re­chen­zen­trum eines Hosting-Providers hosten möchten. An­schlie­ßend in­stal­lie­ren Sie die genannten Server- und Datenbank-An­wen­dun­gen, wobei Sie sich an Software-Stacks wie LAMP oder XAMPP ori­en­tie­ren können, die ein perfekt auf­ein­an­der ab­ge­stimm­tes Paket mit ent­spre­chen­den Kom­po­nen­ten aufweisen.

Sobald Sie das er­for­der­li­che Hardware- und Software-Gerüst für TYPO3 ein­ge­rich­tet haben, können Sie das Content-Ma­nage­ment-System in­stal­lie­ren. Hierfür müssen Sie die In­stal­la­ti­ons­da­tei­en auf der of­fi­zi­el­len TYPO3-Website her­un­ter­la­den, via FTP auf den Webspace über­tra­gen und den Server mit einer gültigen Domain-Adresse ver­knüp­fen.

Haben Sie diesen Schritt durch­ge­führt, starten Sie die In­stal­la­ti­on, indem Sie die Start­sei­te Ihrer neuen TYPO3-Website im Browser Ihrer Wahl aufrufen und danach den An­wei­sun­gen des Ein­rich­tungs­as­sis­ten­ten folgen. Eine aus­führ­li­che Be­schrei­bung der er­for­der­li­chen In­stal­la­ti­ons­schrit­te inklusive der Ver­knüp­fung mit dem Datenbank-Ma­nage­ment-System finden Sie in unserer In­stal­la­ti­ons­an­lei­tung für TYPO3.

Website mit TYPO3 erstellen: Schritt-für-Schritt-Tutorial

Nach der In­stal­la­ti­on können Sie damit beginnen, Ihre erste TYPO3-Website zu erstellen. Wie für Content-Ma­nage­ment-Systeme üblich, bietet auch TYPO3 ein Backend, über das Sie alle re­le­van­ten Aufgaben erledigen können. Um Ihnen den Einstieg in das Backend und die Website-Er­stel­lung mit TYPO3 zu ver­ein­fa­chen, haben wir die wich­tigs­ten Schritte auf dem Weg zur ersten TYPO3-Seite für Sie zu­sam­men­ge­fasst.

Schritt 1: Im TYPO3-Backend anmelden

Für die Anmeldung im TYPO3-Backend benötigen Sie die Login-Daten, die Sie bei der vor­an­ge­gan­ge­nen In­stal­la­ti­on erstellt haben. Rufen Sie über Ihren Browser die URL https://domain-der-website/typo3 auf (setzen Sie an dieser Stelle Ihre eigene Domain ein) und geben Sie den ent­spre­chen­den Nut­zer­na­men sowie das Passwort ein.

Schritt 2: Backend-Sprache umstellen

Das TYPO3-Backend erscheint stan­dard­mä­ßig in eng­li­scher Sprach­aus­ga­be, hält jedoch ein­satz­fer­ti­ge Pakete für diverse weitere Sprachen bereit. Wollen Sie die Be­nut­zer­ober­flä­che also z. B. lieber auf Deutsch nutzen, müssen Sie nur das ent­spre­chen­de Paket in­stal­lie­ren. Wählen Sie zu diesem Zweck den Eintrag „Main­ten­an­ce“ im linken Sei­ten­me­nü aus und drücken Sie im Anschluss auf die Option „Manage Languages“.

Klicken Sie auf „Add language“ und danach in der Zeile „German“ auf das Plus-Zeichen. Die Sprache wurde damit aktiviert und lässt sich nun über den Download-Button her­un­ter­la­den. Im Anschluss sehen Sie eine ent­spre­chen­de Er­folgs­mel­dung.

Im Ad­mi­nis­tra­to­ren­me­nü „User Settings“, das sich über die Schalt­flä­che „Admin“ (befindet sich oben rechts) öffnen lässt, können Sie nun Deutsch als prä­fe­rier­te Sprache auswählen und die Än­de­run­gen über den Save-Button speichern.

Schritt 3: Benutzer(gruppen) erstellen

Bis zum jetzigen Zeitpunkt ist das Ad­mi­nis­tra­to­ren­kon­to das einzige Nut­zer­kon­to, mit dem Sie auf das Backend zugreifen können, um Ihre TYPO3-Website zu erstellen. Sollen auch andere Personen die Website mit­ge­stal­ten und im späteren Verlauf mit Content versorgen, müssen Sie ent­spre­chen­de Benutzer und Be­nut­zer­grup­pen anlegen. Gleiches gilt, wenn Sie Ihren Website-Besuchern die Mög­lich­keit gewähren wollen, sich auf Ihrer Seite zu re­gis­trie­ren, um Zugang zu spe­zi­fi­schen Inhalten zu erhalten.

Beginnen Sie am besten damit, eine erste Be­nut­zer­grup­pe für alle Personen, die an der Kreation und Ver­wal­tung der TYPO3-Website beteiligt sind, zu erstellen. Hierfür klicken Sie im Sei­ten­me­nü auf „Backend-Benutzer“, wählen in der oberen Liste „Backend-Be­nut­zer­grup­pen“ aus und drücken dann auf „Neuen Datensatz erstellen“:

Geben Sie einen Namen für die neue Be­nut­zer­grup­pe ein und wechseln Sie in den Tab „Zu­griffs­lis­te“. Setzen Sie bei den ge­wünsch­ten Einträgen ein Häkchen und klicken auf „Speichern“, um die erteilten Rechte für diese Be­nut­zer­grup­pe zu über­neh­men:

Ist die Gruppe erstellt und ge­spei­chert, ist es an der Zeit, ein erstes Be­nut­zer­kon­to anzulegen. Kehren Sie hierfür in das Menü „Backend-Benutzer“ zurück und wählen Sie dieses Mal den gleich­na­mi­gen Punkt „Backend-Benutzer“. Klicken Sie auch in diesem Fall auf „Neuen Datensatz erstellen“ und geben Sie an­schlie­ßend den ge­wünsch­ten Nut­zer­na­men sowie ein vor­läu­fi­ges Passwort für diesen Zugang an. Unter „Ver­füg­ba­re Objekte“ finden Sie die zuvor angelegte Be­nut­zer­grup­pe, die Sie dem neuen Account durch einfaches Anklicken zuweisen können:

Schritt 4: TYPO3-Template und andere Ex­ten­si­ons in­stal­lie­ren

Wenn Sie mit TYPO3 Seiten erstellen wollen, spielen Templates und andere Er­wei­te­run­gen eine wichtige Rolle. Ex­ten­si­ons helfen Ihnen dabei, das eigene Projekt genau nach Ihren Vor­stel­lun­gen zu gestalten. Haben Sie eine in­ter­es­san­te Ge­stal­tungs­vor­la­ge (oder eine andere Extension) gefunden, die Sie für Ihre Web­an­wen­dung nutzen möchten, können Sie sie im­por­tie­ren und aus­pro­bie­ren. Vor­aus­set­zung ist, dass die Er­wei­te­rung mit der von Ihnen ver­wen­de­ten TYPO3-Version kom­pa­ti­bel ist.

Im ersten Schritt laden Sie die jeweilige Extension auf Ihren PC herunter. Ty­pi­scher­wei­se handelt es sich bei der her­un­ter­ge­la­de­nen Datei um eine .zip- oder eine .t3x-Datei, wobei Sie in beiden Fällen keinerlei Än­de­run­gen vornehmen müssen, um die Extension in TYPO3 zu im­por­tie­ren. Hierfür rufen Sie im TYPO3-Backend das Menü „Er­wei­te­run­gen“ auf und klicken dort auf den Button „Er­wei­te­rung hochladen“. An­schlie­ßend geben Sie mit „Durch­su­chen…“ den lokalen Spei­cher­ort der Datei an und starten danach über den „Hochladen“-Button den Import:

TYPO3 im­por­tiert und in­stal­liert die Er­wei­te­rung au­to­ma­tisch. Erfordert diese die In­stal­la­ti­on weitere Ex­ten­si­ons, in­for­miert Sie das Content-Ma­nage­ment-System in Form einer ent­spre­chen­den Meldung. War der Import er­folg­reich, finden Sie die Extension fortan in der Auf­lis­tung in­stal­lier­ter Er­wei­te­run­gen.

Schritt 5: TYPO3-Seiten erstellen

Nachdem Sie das CMS er­folg­reich ein­ge­rich­tet und grund­le­gend kon­fi­gu­riert haben, können Sie nun damit beginnen, Ihre TYPO3-Website zu erstellen. Dabei besteht die erste Aufgabe auf dem Weg zum eigenen Web­pro­jekt darin, Seiten anzulegen, die Sie im Anschluss mit Inhalten füllen können. Hierfür benötigen Sie das Webmodul „Seite“, das sich auf die bewährte Weise – über das linke Sei­ten­me­nü – öffnen lässt. TYPO3 zeigt Ihnen daraufhin den Sei­ten­baum Ihrer Website an, der zu Beginn natürlich noch leer ist. Klicken Sie per Rechts­klick auf Ihr Projekt und wählen Sie im auf­pop­pen­den Menü die Option „Neue Un­ter­sei­te“:

Für die neue Seite können Sie nun folgende Ein­stel­lun­gen treffen:

• Allgemein: In diesem Tab legen Sie den Seitentyp, den Titel der Seite im Backend und das URL-Segment fest. Zu­sätz­lich zu diesen Pflicht­an­ga­ben können Sie einen al­ter­na­ti­ven Na­vi­ga­ti­ons­ti­tel sowie einen Un­ter­ti­tel bestimmen.
• Metadaten: In den Metadaten einer TYPO3-Seite prä­sen­tie­ren Sie eine in­halt­li­che Zu­sam­men­fas­sung des Sei­ten­in­halts sowie passende Schlag­wor­te (Meta-Tags). Zudem können Sie hier den Namen und die Mail­adres­se des Autors sowie den Zeitpunkt der letzten Sei­ten­ak­tua­li­sie­rung eintragen.
• SEO: Im SEO-Reiter machen Sie Ihre TYPO3-Seiten fit für Google und Co., indem Sie den Title und die De­scrip­ti­on de­fi­nie­ren und Ein­stel­lun­gen zur Sei­ten­in­de­xie­rung treffen.
• Soziale Medien: An dieser Stelle bietet TYPO3 die Mög­lich­keit, den Facebook Open Graph sowie die Twitter Card für die jeweilige Seite zu be­ar­bei­ten (Titel, Be­schrei­bung, Bild).
• Er­schei­nungs­bild: Unter „Er­schei­nungs­bild“ wählen Sie das Sei­ten­lay­out für Front- und Backend.
• Verhalten: Unter diesem Reiter finden Sie u. a. ver­schie­de­ne Ein­stel­lun­gen zum Caching sowie zum Verhalten der Seite bei Ver­lin­kun­gen (URL-Alias, Linkziel).
• Res­sour­cen: Die Aus­zeich­nung von Dateien und Ty­po­Script-Kon­fi­gu­ra­tio­nen, die mit der Seite verknüpft sind, nehmen Sie im Res­sour­cen-Tab vor.
• Sprache: Hier finden Sie Ein­stel­lungs­op­tio­nen für mehr­spra­chi­ge TYPO3-Web­pro­jek­te.
• Zugriff: Hier legen Sie fest, ob und wann die Seite ver­öf­fent­licht werden soll und welche Be­nut­zer­grup­pen Zu­griffs­rech­te besitzen sollen.
• Ka­te­go­rien: Haben Sie Ka­te­go­rien für Ihre Seiten erstellt, können Sie die aktuell aus­ge­wähl­te Seite in diesem Tab einer oder mehreren davon zuordnen.
• Hinweise: Einträge an dieser Stelle dienen Ihnen als re­dak­tio­nel­le Stütze. Tragen Sie Notizen, Er­in­ne­run­gen und To-dos ein, die die jeweilige Ein­zel­sei­te betreffen.

Schritt 6: Inhalte hin­zu­fü­gen: Beispiel Bilder

Nun ist es an der Zeit, die er­stell­ten TYPO3-Seiten mit Inhalten zu füllen. Zu diesem Zweck wählen Sie die jeweilige Seite im Sei­ten­baum aus und auf den Button „Inhalt“, über den sich neue In­halts­ele­men­te erstellen lassen. Es öffnet sich ein neues Menü, in dem Sie den Typ des neuen Contents de­fi­nie­ren können. Zu­sätz­lich zu klas­si­schen Elementen wie Über­schrif­ten, Text, Bildern, Auf­zäh­lun­gen oder Tabellen sind an dieser Stelle u. a. diverse Menüs sowie einige Formulare aus­wähl­bar.

Wählen Sie den ge­wünsch­ten In­halts­ty­pen aus und klicken Sie auf „Speichern“, um diesen auf der aktuellen Seite zu plat­zie­ren. Wollen Sie Bilder einfügen, müssen Sie diese aber zunächst auf den Webspace hochladen. Hierfür wechseln Sie in den Tab „Bilder“ und drücken auf die Schalt­flä­che „Dateien auswählen und hochladen“. Geben Sie den lokalen Spei­cher­ort des Fotos oder der Grafik an und klicken Sie auf „Öffnen“, um den Upload auf den Server zu starten. Sie können die Bilder Ihrer Wahl auch einfach per Drag-and-Drop in den hierfür vor­ge­se­he­nen Bereich ziehen.

Im Anschluss an den Upload-Prozess listet TYPO3 die Dateien inklusive Thumbnail un­ter­ein­an­der auf. Klicken Sie einen dieser Einträge an, öffnet sich ein kleines Extramenü, in dem Sie die Bild­un­ter­schrift und den Alt-Text eingeben – Letzterer wird immer dann angezeigt, wenn das Bild für den Besucher nicht verfügbar ist bzw. nicht geladen werden kann. Zudem haben Sie die Mög­lich­keit, das jeweilige Bild im TYPO3-eigenen Bild­edi­tor Image­Ma­gick an­zu­pas­sen.

Schritt 7: Interne und externe Ver­lin­kun­gen erstellen

Wenn Sie eine TYPO3-Website erstellen, spielen natürlich auch Links eine wichtige Rolle. Während interne Ver­lin­kun­gen ein einfaches Mittel sind, um die eigenen Artikel zu pushen und besser un­ter­ein­an­der zu vernetzen, schaffen Sie mit (hoch­wer­ti­gen und hilf­rei­chen!) externen Links gleich­zei­tig einen Mehrwert für Ihre Besucher sowie ein höheres Ansehen bei Such­ma­schi­nen. In beiden Fällen helfen aus­sa­ge­kräf­ti­ge An­ker­tex­te und Link-Titles dabei, dass Lesende und Such­ma­schi­nen verstehen, mit welchem Content beim Link-Ziel zu rechnen ist.

Sowohl das Setzen eines Links als auch die For­mu­lie­rung eines Titles funk­tio­niert in TYPO3 direkt über den Text-Editor. Öffnen Sie hierfür also den ge­wünsch­ten Text­ab­schnitt, indem Sie auf das Stift-Symbol an dem ent­spre­chen­den In­halts­block klicken und nach unten scrollen. Im Text markieren Sie nun den Text­aus­schnitt, den Sie als Ankertext – also als sicht- und klick­ba­ren Teil des Links – verwenden möchten und klicken dann auf das Ketten-Symbol in der Me­nü­leis­te des Editors:

Im ersten Fenster des sich daraufhin öffnenden Link-Browsers erzeugen Sie interne Links. Zu diesem Zweck fügen Sie zunächst den ge­wünsch­ten Title ein und klicken dann im Sei­ten­baum auf die zu ver­lin­ken­de Seite. Für die Kreation externer Links wechseln Sie in den Reiter „Externe URL“. Auch in diesem Fall gilt es, einen Title für den Link zu bestimmen – an­schlie­ßend geben Sie die Ziel-URL an und klicken auf „Link setzen“:

Schritt 8: Ma­nage­ment und Pflege der er­stell­ten TYPO3-Website

Für den dau­er­haf­ten Erfolg Ihres Web­pro­jekts ist die kon­ti­nu­ier­li­che Pflege und Op­ti­mie­rung des Contents und der tech­ni­schen Basis un­ver­zicht­bar. Auch die stetige Ak­tua­li­sie­rung der ein­ge­bun­de­nen Software-Kom­po­nen­ten inklusive des Content-Ma­nage­ment-Systems selbst gehört zu den absoluten Pflicht­auf­ga­ben.

TYPO3 stellt Ihnen zu diesem Zweck einige nützliche Features zur Verfügung. So finden Sie unter dem Menüpunkt „Protokoll“ eine de­tail­lier­te Auf­lis­tung sämt­li­cher Aktionen, die Nutzer im Backend aus­ge­führt haben. Darüber hinaus enthält das Ad­mi­nis­tra­ti­ons­pro­to­koll Einträge über die In­ter­ak­ti­on mit der Datenbank sowie über auf­ge­tre­te­ne Fehler:

Wenn Sie wissen wollen, wie es um die Ak­tua­li­tät von TYPO3 (inklusive Er­wei­te­run­gen) und die Si­cher­heit Ihrer Website bestellt ist, ist ein Blick in das Menü „Berichte“ zu empfehlen. Hier zeigt TYPO3 nach einem Klick auf „Sta­tus­be­richt“ die wich­tigs­ten Parameter der Reihe nach auf. Grün dar­ge­stell­te Einträge markieren dabei Parameter, bei denen keine Probleme fest­ge­stellt wurden, während gelb bzw. rot markierte Einträge solche Ei­gen­schaf­ten kenn­zeich­nen, bei denen Hand­lungs­be­darf besteht: