handbuch typo3 | seo-strategie · die arbeitsoberfläche von typo3 ist in drei hauptbereiche...
TRANSCRIPT
Keel Marktideen AG St. Gallen
Handbuch TYPO3 | SEO-Strategie
Marketing | WebDesign | eCommerce
__________ Seite 2
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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 Know-how. 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.
Marketing | WebDesign | eCommerce
__________ Seite 3
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
TYPO3 – HTML – CSS-Wechsel-Wirkung
TYPO3 TYPO-Script mySQL-DB Image-Magic Extensions …
CSS-Formatierungen Layoutkonzept •
YAML • Spans/Klassen •
JavaScript • …
Content/Inhalt Texte Bilder Animationen Dokus, etc. …
HTML Seite
Marketing | WebDesign | eCommerce
__________ Seite 4
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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/ - www.google.ch/analytics/ - www.google.ch/business/ - www.google.ch/AdWords
User: ____________
PW: ____________
Marketing | WebDesign | eCommerce
__________ Seite 5
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
Statistik
Die Website wird mit Google-Sitemap und Google-Analytics ausgerüstet:
User: ___________
PW: ___________
Marketing | WebDesign | eCommerce
__________ Seite 6
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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 (_).
Marketing | WebDesign | eCommerce
__________ Seite 7
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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:
www.ihredomain.ch/typo3
Bitte bei der Browsers-Einstellung beachten: Cookies/JavaScript müssen zur Bearbeitung der Website mit TYPO3 zugelassen sein!
User: _____________
Passwort: _____________
Marketing | WebDesign | eCommerce
__________ Seite 8
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 9
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 10
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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).
Marketing | WebDesign | eCommerce
__________ Seite 11
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 12
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 13
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 14
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 15
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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
Marketing | WebDesign | eCommerce
__________ Seite 16
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
> 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.
Marketing | WebDesign | eCommerce
__________ Seite 17
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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, die für mehr als ein Wort stehen, werden am Satzanfang ausgeschrieben.
Zum Beispiel hat ... (nicht: Z. B. hat ...) Mit anderen Worten ... (nicht: M. a. W. ...)
Abkürzungen Ohne Punkt: international festgelegte metrische Masse und Gewichte, Einheiten in Naturwissenschaften und Technik, Abkürzungen für Himmelsrichtungen und die meisten Währungen.
m Meter g Gramm NO Nordosten CHF Schweizerfranken
Anführungs-/ Schlusszeichen
Anführungs- und Schlusszeichen immer ohne Zwischenraum und Satzzeichen ausserhalb der Klammern.
« = Alt+174 » = Alt+175 Sie rief: «Ich komme ja»!
Auslassungs-punkte
Um eine Auslassung in einem Satz zu kennzeichnen setzt man einen Abstand und drei Punkte.
Nur eine der folgenden Destinationen ... ist die richtige.
Franken (Rappen)
Runde Frankenbeträge werden korrekt mit dem Geviertstrich dargestellt. (Dieser ist länger als der Halbgeviertstrich).
— = Alt+0150
CHF 15.–
Gedankenstrich Der Gedankenstrich (Halbgeviertstrich) ist länger als der Bindestrich.
– = Alt+0150 Die Person – jetzt alt und weise – sitzt im Lehnstuhl.
Gradzeichen Temperaturen ohne Zwischenraum. Bei anderen Gradangaben wird das Gradzeichen unmittelbar an die Zahl angeschlossen.
- 3oC; +13oC ein Winkel von 30o 20o nördlicher Breite
Prozentzeichen Bei Prozentzeichen kein Zwischenraum setzen. 25%
eine 15%ige Steigerung Striche von/bis
FC St. Gallen spielt gegen GC Resultat 3 zu 0 Strecke Zürich nach Basel
vom 17.8. - 19.8. St. Gallen - GC 3:0 Zürich-Basel
Telefonnummern
Bei der internationalen Telefonnummern-Schreibweise wird «+41» vorangestellt und die ersten drei Ziffern der Rufnummer zusammengefasst.
+41 71 220 20 50
Zahlen Für Tausendertrennstriche Hochkomma verwenden.
1'000 13'580
Marketing | WebDesign | eCommerce
__________ Seite 18
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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
Marketing | WebDesign | eCommerce
__________ Seite 19
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
Backend Seiteneigenschaften Die Seiten-Eigenschaften gehen oft vergessen … Bei Bedarf folgende Eigenschaften in den Seiteneigenschaften im Reiter «Allgemein»
anpassen.
Marketing | WebDesign | eCommerce
__________ Seite 20
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
Backend Seiteneigenschaften
Marketing | WebDesign | eCommerce
__________ Seite 21
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 22
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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).
Marketing | WebDesign | eCommerce
__________ Seite 23
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
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.
Marketing | WebDesign | eCommerce
__________ Seite 24
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
8 Anhang http://www.typo3.org Allgemeine Informationen über TYPO3 die sich vor allem an Entwickler, Programmierer und Grafiker richten. Login/Einstellungen FileZilla FTP
Server www.ihredomain.ch
Benutzer ______________
Passwort ______________
Marketing | WebDesign | eCommerce
__________ Seite 25
Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen [email protected]
Weiterführende Links: Support
http://www.marktideen.ch/support/ TYPO3 Lern-Videos
http://www.marktideen.ch/shortcut-navigation/login/ - User: marktideen - PW: kmi4ever
Download Firefox:
http://www.firefox-browser.de/
Download FileZilla:
http://www.filezilla.de/
Link Checker (kostenlos):
http://validator.w3.org/checklink
Version: Januar 2016