Nicht immer werden Artikel einer Webseite ausschließlich am Bildschirm gelesen. Abhängig von der Zielgruppe, dem Thema und dem Umfang drucken sich viele Internetnutzer einen Artikel aus. Es gehört mittlerweile zum guten Ton seinen Besuchern eine druckerfreundliche Ansicht bereit zu stellen. Nicht selten wird hierbei jedoch unter einer neuen URL der gleiche Inhalt angeboten. Aus SEO Sicht eine nicht optimale Vorgehensweise, weil hier doppelter Inhalt produziert wird (Duplicate Content). Eine vorzuziehende Lösung ist der Einsatz einer print.css.
In diesem Artikel erfahrt ihr drei gute Möglichkeiten wie man eine Druckansicht suchmaschinenfreundlich gestaltet.
1. Robot Meta-Tag Spezifikationen einsetzen
Wer auf seiner Webseite unter einer spezielle URL eine Druckversion zu einem Artikel anbietet und das nicht ändern will, sollte mit den Robot Meta-Tag Spezifikationen “noindex, noarchive, nofollow” arbeiten, um Suchmaschinen wie Google entsprechende Anweisungen hinsichtlich der URL für die Druckansicht zu vermitteln.
Die Meta-Tag Spezifikation noindex sorgt dafür, dass die Seite z. B. von Google nicht indexiert wird und somit nicht in den Suchergebnissen auftaucht. <meta name="robots" content="noindex" />
Die Meta-Tag Spezifikation noarchive verhindert die Aufnahme der Webseite in den Google Webseiten-Cache. <meta name="robots" content="noarchive" />
Die Meta-Tag Spezifikation nofollow sorgt dafür, dass alle Links auf dieser Webseite nicht verfolgt werden. <meta name="robots" content="nofollow" />
Möchte man alle drei Robot Meta-Tag Spezifikationen in einem Eintrag integrieren, verwendet man folgenden Code-Snippet und trennt die einzelnen Tags einfach mittels Komma voneinander: <meta name="robots" content="noindex, noarchive, nofollow" />
2. Robots.txt für Druckansichten aktualisieren
Eine weitere Möglichkeit ist der Einsatz einer robots.txt Datei, in welcher die speziellen URLs für die Druckansicht gesperrt werden. Hier ein Beispiel, wie die Codezeile für einen Eintrag in der robots.txt aussehen kann, wobei nach Disallow: die URL Struktur eingetragen werden sollte, die auf die Druckansicht verweist.
User-agent: *
Disallow: /node/printurl
Disallow: /book/printurl
(Anmerkung: die aufgeführten Code-Snippets sind natürlich nur ein Beispiel und müssen auf die eigenen Gegebenheiten angepasst werden.)
3. Mit einer print.css arbeiten
Die wahrscheinlich beste Lösung für SEO freundlichen Webseitendruck ist der Einsatz eines druckerfreundlichen CSS Templates. Dieses ist natürlich für die komplette Seite gültig. Hierbei stellt man sicher, dass immer mit ein und der selben URL gearbeitet wird. Damit die Druckversion des Online Artikels ansprechend aussieht, empfiehlt es sich einige Anpassungen in der print.css vorzunehmen. Hierbei sollte man im Hinterkopf behalten, dass alles übersichtlich bleiben soll und dem Inhalt mehr Platz bietet. Dann kommt man schnell darauf, dass eigentlich alles, was nicht zum Titel oder Inhalt gehört weg fällt. Bei den meisten Blogs oder Webseiten wäre das zum Beispiel:
- die Werbeflächen. Die machen bei Druckversionen absolut keinen Sinn, weil man nicht drauf klicken kann.
- die Seitenbereiche. Auch die sind bei einem Ausdruck nur störend. Wen interessieren schon beispielsweise die beliebtesten Inhalte oder neusten Kommentare wenn auch hier der Klick darauf nicht möglich ist. Zudem geht dafür wertvoller Platz für den Inhalt verloren.
- Kommentarformulare oder Kommentarmöglichkeiten haben auf dem Ausdruck nichts zu suchen.
- Fußbereiche. Der Titel und die URL einer Seite sind bereits auf dem Aufdruck zu lesen. Copyright Informationen oder andere Seiteninfos im Fuß wären somit überflüssig.
- die Navigation, Suchfelder oder Breadcrumbs sind ebenfalls überflüssig und lenken vom eigentlichen Inhalt ab.
Die hier genannten Elemente sollten in der print.css alle auf
display: none;
gesetzt werden.
display: none vs. visibility: hidden
Die CSS Eigenschaft display: none; ist der CSS Eigenschaft visibility: hidden; vorzuziehen. Bei letzterer würde zwar das Element ausgeblendet, der freie Raum dafür aber bestehen bleiben. Das sorgt dann für unnötigen Leerraum im Ausdruck der Seite, was mit Sicherheit nicht gewollt ist.
Die restlichen Elemente kann man passend zum Druck positionieren. Hauptsache der Inhalt rückt in den Vordergrund und es macht Spaß ihn zu lesen. Wer beispielsweise Drupal mit dem ZEN-Theme einsetzt, findet im Themes CSS-Ordner bereits eine print.css die er beliebig an seine Bedürfnisse anpassen kann.
Was sonst zu beachten ist
Damit der Ausdruck gut leserlich wird, sollten auf jeden Fall noch folgende Punkte berücksichtigt werden:
- Hintergrundfarbe. Die sollte weiß sein und nicht farbig.
- Schriftfarbe. Am besten schwarz, weil man schwarz auf weiß gut lesen kann. Codeabschnitte können in Ausnahmefällen etwas farblich abweichen um sie deutlicher zu machen. Alternativ sollte man hier aber mit kursiv oder einer anderen Schriftarten arbeiten.
- Schriftgröße. Ist die Schriftgröße für den Ausdruck geeignet und gut leserlich? In der Praxis hat sich eine Schriftgröße von 12pt für den Ausdruck bewährt.
- Randabstand. Ist dieser für den Druck angemessen breit und nicht zu eng oder zu weit vom Rand entfernt? In der Regel sollte man für den Text immer die volle Breite nutzen und Abstände entsprechen anpassen, bzw. auf 0 stellen.
- Links. Sind im Text integrierte Links auch beim Ausdruck als solche erkennbar? Hier sollte man nicht nur mit einer anderen Farbe (blau) arbeiten, sondern Links auch typisch unterstrichen darstellen, falls jemand den Text schwarz/weiß ausdruckt.
Egal ob die Webseite für unternehmerische oder private Zwecke erstellt wird. Der Aufwand für den Einsatz einer print.css lohnt sich allemal, weil man den Besuchern dadurch definitiv einen Mehrwert bietet.