handbuch typo3 | seo-strategie · die arbeitsoberfläche von typo3 ist in drei hauptbereiche...

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

> 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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

Backend Seiteneigenschaften

Marketing | WebDesign | eCommerce

__________ Seite 21

Keel Marktideen AG Hintere Davidstrasse 24 +41 (0)71 220 20 50 CH-9000 St. Gallen info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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 info@marktideen.ch

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