Keel Marktideen AG. St. Gallen. Handbuch TYPO3 SEO-Strategie

Transkript

1 St. Gallen Handbuch TYPO3 SEO-Strategie

2 1 Content-Management-System (CMS) Was ist TYPO3? TYPO3 ist ein freies Open-Source Content-Management-System für Internet- und Intranetauftritte. TYPO3 wird seit 1997 von dem Dänen Kasper Skarhøj mit der Hilfe und Anregung von tausenden weiter entwickelt. Es ist das einzig kostenlose Enterprise-System. Die hier beschriebene Version 6.x ist seit 2014 verfügbar. Mehr über TYPO3 erfahren Sie auf den im Anhang angeführten Internetseiten. Was ist ein Content-Management-System? Content-Management-Systeme trennen Inhalt, Struktur und Layout von Dokumenten und integrieren die Bearbeitung und Pflege von Dokumenten in einen definierten Arbeitsablauf (Workflow). Das hat für die Autoren, Sachbearbeiter und Redakteure den grossen Vorteil, dass sie sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren können, ohne sich um das Layout, die Einbindung ihrer Seite oder andere technische Aspekte kümmern zu müssen. Welche Vorteile bietet das? Die Inhalte (Texte, Bilder, Dateien zum Downloaden, Tabellen, Statistiken usw.) der Website können von den für einzelne Ressorts zuständigen Personen über einen Webbrowser selbstständig erstellt und gepflegt werden - und zwar ohne besonderes technisches Knowhow. Das Content-Management-System TYPO3 ist sehr einfach zu erlernen, man braucht keine Vorkenntnisse in HTML oder JavaScript. Die Vorteile liegen auf der Hand: Für die Webautoren und Redakteure werden das Anlegen neuer Inhalte und die Aktualisierung bestehender Inhalte erleichtert, und für die Besucher und Leser der Website erhöht sich das Surfvergnügen durch hoffentlich mehr und aktuelle Inhalte, die ausserdem noch leichter zu finden sind. Seite 2

3 TYPO3 HTML CSS-Wechsel-Wirkung TYPO3 TYPO-Script mysql-db Image-Magic Extensions CSS-Formatierungen Layoutkonzept YAML Spans/Klassen JavaScript HTML Seite Content/Inhalt Texte Bilder Animationen Dokus, etc. Seite 3

4 2 Zugänge: Google & TYPO3 Alles im Webbrowser TYPO3 ist ein Online-Redaktionssystem und verwendet als Client nur einen üblichen Webbrowser, wie Google auch. Sie können jederzeit von jedem Ort mit Internetzugang Veränderungen an Ihrer Website oder Ihren Google-Tools vornehmen: Zugangsadressen - IhreDomain.ch/typo3/ User: PW: Seite 4

5 Statistik Die Website wird mit Google-Sitemap und Google-Analytics ausgerüstet: User: PW: Seite 5

6 Frontend Das sogenannte Frontend von TYPO3 («Vorderseite») ist der Webserver, welcher die Webseiten den Besuchern anzeigt. Der Zugriff kann mit jedem beliebigen Webbrowser erfolgen, auch mit älteren Versionen und auch ohne spezielle Funktionen wie Cookies oder JavaScript. Im Allgemeinen ist auch kein Login notwendig (nur bei passwortgeschützten Seiten). Unbedingt 8-3er File-Konvention für Web beachten! Beim Hochladen von Dateien (JPG s, PDF s etc.) folgende Filebezeichnungen einhalten: Keine: Grossschreibung Sonderzeichen Umlaute Leerschläge einsetzen Erlaubt sind das Minus (-) sowie der Unterstrich (_). Seite 6

7 Backend Das sogenannte Backend von TYPO3 («Hinterseite») ist das Content-Management-System (CMS), mit dem die Webseiten erstellt und editiert werden. Der Zugriff ist nur für berechtigte Personen, die Autoren oder Redakteure, möglich (Login, siehe unten). Sie brauchen dafür einen Benutzernamen und ein Passwort mit einer entsprechenden TYPO3- Berechtigung. Mit aktuellen Browsern wie Chrome, Firefox oder mit dem Internet Explorer ab Version 10 lassen sich Texte besonders vorteilhaft im Rich Text Editor bearbeiten. Login zum Backend Wenn Sie die Adresse des TYPO3-Backends in Ihrem Webbrowser eingeben, erscheint eine Seite mit folgendem Dialogfeld: Bitte bei der Browsers-Einstellung beachten: Cookies/JavaScript müssen zur Bearbeitung der Website mit TYPO3 zugelassen sein! User: Passwort: Seite 7

8 3 Benutzeroberfläche TYPO3 zeigt jedem Benutzer immer das an, wofür er berechtigt ist. Die Anzeige in Ihrem System und mit Ihrem Benutzernamen kann also durchaus anders aussehen als in den gezeigten Beispielen. Aufbau Die Arbeitsoberfläche von TYPO3 ist in drei Hauptbereiche unterteilt. Links sehen Sie die Modulleiste. Hier wählen Sie aus, welche Art von Arbeiten Sie durchführen wollen. In der Mitte sehen Sie den Seiten- oder Dateienbaum. Hier wählen Sie aus, welche Seite oder welchen Dateiordner Sie bearbeiten wollen. Rechts sehen Sie die Arbeitsfläche. Das Beispiel oben zeigt eine Seite mit 3 Spalten. Hier führen Sie Ihre Arbeiten durch. Die Anordnung dieser Bereiche entspricht auch der Reihenfolge beim Editieren in TYPO3: 1. Zuerst in der Modulleiste das Modul auswählen (z.b. Web / Seite), 2. dann im Seitenbaum die Webseite auswählen (z.b. Home) und 3. anschliessend in der Arbeitsfläche die eigentliche Arbeit an den Inhalten durchführen. Seite 8

9 Modulleiste Jeder Benutzer sieht nur die Module, zu deren Verwendung er berechtigt ist. Durch Klicken auf die Gruppenbezeichnungen mit den Pfeil- Symbolen können die Modulgruppen auf- und zugeklappt werden. Durch Klicken auf die Modulbezeichnungen oder die danebenstehenden Symbole erscheint der entsprechende Seitenbaum. Mit dem Modul «Anzeigen» lassen sich die Seiten durchblättern und so betrachten, wie sie der Besucher sehen wird. Mit dem Modul «Seite» lassen sich die Inhalte der Seiten bearbeiten. In der Modulgruppe «Datei» wird der Dateienbaum angezeigt. Er stellt die Struktur der Ordner für den Upload von Dateien baumartig dar. Die «Einstellungen» dienen dem Benutzer zur Pflege seiner persönlichen Daten und Einstellungen. Sie haben keinen Einfluss auf das, was der Besucher zu sehen bekommt. Seite 9

10 Seitenbaum / Sitemap Der Seitenbaum in der Modulgruppe Web stellt die Struktur Ihrer Website baumartig dar. Durch Klicken auf die Pfeilsymbole lassen sich Teilbäume auf- und zuklappen. Jeder Benutzer sieht nur die Seiten bzw. Dateien, für die er eine Zugriffsberechtigung hat. In den meisten Fällen ist dies Ihr Webbereich, auf den Sie vollen Zugriff zur Bearbeitung haben. Eventuell sehen Sie auch noch einen oder mehrere andere Bereiche oder die gesamte Website, auf die Sie aber nur Lesezugriff haben. Klick auf ein Symbol öffnet ein Kontextmenü zur Handhabung der Seite. Klick auf den Text rechts neben dem Symbol öffnet die Arbeitsfläche zur Editierung des Seiteninhaltes (Screenshot). Seite 10

11 Arbeitsfläche Der grosse rechte Teil ist die detaillierte Arbeitsoberfläche. Hier werden die einzelnen Bestandteile des von Ihnen ausgewählten Elementes angezeigt. Die Bearbeitungsoptionen (und damit auch die Art der Darstellung in der Arbeitsfläche) sind abhängig vom jeweiligen Modul, mit dem Sie gerade arbeiten. Hier zeige ich Ihnen als Beispiel die Arbeitsfläche für das Editieren einer bereits mit Inhalten gefüllten Seite. Es handelt sich in diesem Beispiel um ein zweispaltiges Layout: Die Spalte Text steht für den Hauptinhalt zur Verfügung. Die Spalte rechts ist für spezielle Informationen gedacht. Sie erscheint nur, wenn sie Inhalte enthält. Seite 11

12 4 Seiten anschauen (Anzeigen) Mit dem Modul «Anzeigen» lassen sich im Seitenbaum Ihre Seiten durchblättern und so betrachten, wie sie der Besucher sehen wird. Wenn Sie im Modul «Anzeigen» die gewünschte Seite gefunden haben, schalten Sie in das Modul «Seite» um, und schon können Sie die Inhalte bearbeiten oder eine neue Seite anlegen. Nachdem Sie im Modul «Seite» Inhalte bearbeitet und gesichert haben, können Sie diese im Modul «Anzeigen» sofort betrachten. Seite 12

13 5 Seiten anlegen (Seite) > Eine neue Seite anlegen Die Grundstruktur Ihres Webauftritts ist bereits in TYPO3 angelegt. Sie fügen also an einer beliebigen Stelle Ihres Seitenbaums eine neue Seite ein. Dazu verwenden Sie das Modul «Seite». Wählen Sie das Modul «Seite». Suchen Sie im Seitenbaum die Seite, unter oder innerhalb der Sie eine neue Seite anlegen wollen. Klicken Sie auf das Symbol links vom Seitennamen und wählen Sie im Kontextmenü den Punkt «Seitenaktionen». In der Arbeitsfläche erscheint das Auswahlfenster «Neu» mit einem Abbild Ihres Seitenbaumes und allen möglichen Einfügestellen. Klicken Sie auf den Pfeil, der die gewünschte Einfügeposition anzeigt. Seite 13

14 Sie sehen die Arbeitsfläche «Neue Seite» zur Eingabe der Seiteneigenschaften. Eine gelbe Signaltafel zeigt an, wo zwingend etwas eingegeben werden muss. Geben Sie im Eingabefeld «Seitentitel» einen kurzen Titel ihrer Seite ein. Dieser erscheint dann im Frontend in der Navigationsleiste. Und nun klicken Sie im dunkelgrauen Balken über der Arbeitsfläche auf das Symbol «Dokument speichern» Fertig! Ihre neue Seite ist angelegt und erscheint im Seitenbaum. Allerdings ist sie noch leer, sie hat noch keinen Inhalt (Siehe Abschnitt 6 Inhalte bearbeiten). > Die Seite sichtbar schalten Bis die Seite fertig bearbeitet ist, soll sie nicht im Frontend erscheinen. Um sie freizugeben, können Sie durch Klick auf das Symbol von Aktivieren auf Deaktivieren umschalten. > Eine bestehende Seite löschen Suchen Sie im Seitenbaum die zu löschende Seite. Klicken Sie auf das Symbol links vom Seitennamen und wählen Sie im Kontextmenü den Punkt «Seiten Aktion / löschen». Sie können nur Seiten löschen, die Sie selber erstellt haben. Seite 14

15 6 Inhalte bearbeiten (Seite) > Wählen Sie das Modul «Seite». > Suchen Sie im Seitenbaum die zu bearbeitende Seite und klicken Sie auf den Namen (nicht auf das Symbol). Es erscheint die Arbeitsfläche «Seiteninhalt» für das Editieren der Inhaltselemente. > Ein neues Inhaltselement erstellen Wir erstellen ein neues Inhaltselements in der Hauptspalte (Normal) der Seite. 1. Klicken Sie in der Spalte «Normal» auf das Symbol «Neu» 2. Wählen Sie in der Arbeitsfläche «Neues Inhaltselement» den gewünschten Inhaltstyp Seite 15

16 > Text einfügen und formatieren Zur Erstellung einer kräftigen Hauptüberschrift tragen Sie im Feld «Überschrift» Ihren Seitentitel ein. Dieses Feld kann aber auch leer gelassen werden. Im Feld «Text» arbeiten Sie im Rich Text Editor (grosses Textfeld) wie in einem normalen Textverarbeitungsprogramm. Es stehen Ihnen hier auch die notwendigen Formatierungswerkzeuge zur Verfügung. Gehen Sie damit sparsam um, und halten Sie sich an die für Ihre Website geltenden Normen. Wenn Sie kopierten Text einfügen, muss dieser von möglichen Formatierungen gesäubert werden. Seite 16

17 Texte korrekt formatieren Themen Details Beispiele Abkürzungen Steht eine Abkürzung mit Punkt (.) am Satzende, ist der Abkürzungspunkt zugleich Schlusspunkt des Satzes. Sie verwenden gerne Zitate von Schiller u.a. Abkürzungen Abkürzungen Anführungs-/ Schlusszeichen Auslassungspunkte Franken (Rappen) Gedankenstrich Gradzeichen Abkürzungen, die für mehr als ein Wort stehen, werden am Satzanfang ausgeschrieben. Ohne Punkt: international festgelegte metrische Masse und Gewichte, Einheiten in Naturwissenschaften und Technik, Abkürzungen für Himmelsrichtungen und die meisten Währungen. Anführungs- und Schlusszeichen immer ohne Zwischenraum und Satzzeichen ausserhalb der Klammern. Um eine Auslassung in einem Satz zu kennzeichnen setzt man einen Abstand und drei Punkte. Runde Frankenbeträge werden korrekt mit dem Geviertstrich dargestellt. (Dieser ist länger als der Halbgeviertstrich). Der Gedankenstrich (Halbgeviertstrich) ist länger als der Bindestrich. Temperaturen ohne Zwischenraum. Bei anderen Gradangaben wird das Gradzeichen unmittelbar an die Zahl angeschlossen. Zum Beispiel hat... (nicht: Z. B. hat...) Mit anderen Worten... (nicht: M. a. W....) m g NO CHF Meter Gramm Nordosten Schweizerfranken «= Alt+174» = Alt+175 Sie rief: «Ich komme ja»! Nur eine der folgenden Destinationen... ist die richtige. = Alt+0150 CHF 15. = Alt+0150 Die Person jetzt alt und weise sitzt im Lehnstuhl. - 3 o C; +13 o C ein Winkel von 30 o 20 o nördlicher Breite Prozentzeichen Bei Prozentzeichen kein Zwischenraum setzen. 25% eine 15%ige Steigerung Striche Telefonnumme rn Zahlen von/bis FC St. Gallen spielt gegen GC Resultat 3 zu 0 Strecke Zürich nach Basel Bei der internationalen Telefonnummern- Schreibweise wird «+41» vorangestellt und die ersten drei Ziffern der Rufnummer zusammengefasst. Für Tausendertrennstriche Hochkomma verwenden. vom St. Gallen - GC 3:0 Zürich-Basel '000 13'580 Seite 17

18 Ansicht Frontend: Copy &Paste Zu kopierende Texte zuerst immer in den «Editor» kopieren/ablegen Dann erneut markieren und nur Text kopieren oder ausschneiden Funktionen: - CTRL + A: Alles markieren - CTRL + C: kopieren - CTRL + V: Kopiertes einfügen - CTRL + X: ausschneiden Kontrolle im TYPO3-Backend FALSCH: HTML mit Fremdformatierung KORREKT: HTML ohne Fremdformatierung Seite 18

19 Backend Seiteneigenschaften Die Seiten-Eigenschaften gehen oft vergessen Bei Bedarf folgende Eigenschaften in den Seiteneigenschaften im Reiter «Allgemein» anpassen. Seite 19

20 Backend Seiteneigenschaften Seite 20

21 Bild einfügen Wenn Sie als Inhaltselement Text & Bild gewählt haben, steht Ihnen nebst «Allgemein» auch das Register «Bilder» zur Verfügung. > Klicken Sie in die Schaltfläche «Bild hinzufügen». 1. Falls sich das gewünschte Bild bereits im Ordner «Bilder» befindet, klicken Sie es dort einfach an und es wird dem Inhaltselement beigefügt. 2. Andernfalls können Sie Bilder und Dateien im Feld «Select & upload files» in Ihren Ordner «bilder» bzw. «dokumente» hochladen Bildergalerie: Wenn Sie «Bei Klick vergrössern» wählen, stehen dem Besucher die Bilder durch Anklicken in voller Grösse zur Verfügung. Seite 21

22 Ansicht Backend: Linkvalidierung Damit im ganzen Projekt keine toten Links vorkommen, sollte von Zeit zu Zeit über das Modul «Info», die Linkvalidierung geprüft werden (siehe Screenshot). Seite 22

23 Backend-Ansicht: «Dateiliste» Unbedingt 8-3er File-Konvention für Web beachten! Beim Hochladen von Dateien (JPG s, PDF s etc.) folgende Filebezeichnungen einhalten: Keine: Grossschreibung Sonderzeichen Umlaute Leerschläge einsetzen Erlaubt sind das Minus (-) sowie der Unterstrich (_). 7. Copyright Achten Sie darauf, dass alle Inhalte, Texte und Bilder, die Sie einbringen, nicht durch Copyrights geschützt sind, die Sie nicht erworben haben. Seite 23

24 8 Anhang Allgemeine Informationen über TYPO3 die sich vor allem an Entwickler, Programmierer und Grafiker richten. Login/Einstellungen FileZilla FTP Server Benutzer Passwort Seite 24

25 Weiterführende Links: Support TYPO3 Lern-Videos - User: marktideen - PW: kmi4ever Download Firefox: Download FileZilla: Link Checker (kostenlos): Version: Januar 2016 Seite 25