\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{SEO-Checkliste}
\usepackage[
pdftitle={SEO-Checkliste}
pdfsubject={SEO Search Engine Optimization Checkliste zur Überprüfung eigener Optimierungsversuche}
pdfauthor={Udo Schmal}
pdfkeywords={Analyse, SEO, Search Engine Optimization, Suchmaschinenoptimierung, ISAPI}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}SEO-Checkliste
\singlespacing
{\LARGE \textbf{\label{sec:title}SEO Checkliste}}

Suchmaschinen-Optimierung ist ein großes Gebiet und immer wichtigerer Bereich in der Administration, Entwicklung aber auch der Redaktion von Internet-Auftritten. Eine schlechte Platzierung ist meist nicht auf schlechte Inhalte, sondern mehr auf deren Präsentation im Internet zurückzuführen, wobei in diesem Fall die technisch/formale mehr  als die optische Form gemeint ist.

Im folgenden werden die Optimierungs-Möglichkeiten in Arbeitsbereiche aufgeteilt, damit sich der mit der Optimierung beschäftigte Benutzerkreis auf sein Aufgabenfeld konzentrieren kann und sich nicht mit für ihn unnötigen Informationen  herum quälen muss! Es ist jedoch zu beachten das es in manchen Bereichen zu Überschneidungen kommen kann oder auch Aufgaben geteilt werden müssen.

Bei der Auflistung wurde auf eine logische Reihenfolge geachtet die mit einer Gewichtung der SEO-Kriterien nicht unbedingt einhergeht, während bei der Administration und Entwicklung von quasi Außen nach Innen (Protokoll nach HTML-Content) aufgelistet wird, wird bei der Redaktion von quasi Oben nach Unten (Überschrift und Kopfinformationen nach Inhalt) sortiert.\newline


\item           
\singlespacing
\textbf{Konfiguration Webserver}

\begin{itemize}
\item \textbf{Vermeiden von Duplicate Content}, hier wird oft zwischen internal und external unterschieden\newline
Als Erstes sollte sichergestellt werden das der Content nur über eine Domain erreichbar ist (external), also alle anderen / alternativen Domains (auch oder gerade die Subdomains) auf die Haupt-Domain umleiten.\newline
z.B. gocher.me auf www.gocher.me\newline
Des Weiteren sollte darauf geachtet werden, dass nur eine Variante mit oder ohne \&quot;trailing Slashes\&quot; (Slash am Ende der Url) das Ergebnis wiedergibt, die andere Variante sollte ebenfalls auf diese umgeleitet werden.\newline
In vielen CMS werden Clean Url oder Pretty Url also eine lesbare URL über Erweiterungen Filter realisiert, dieses birgt die Gefahr das sowohl die lesbare als auch die kryptische Adresse Zielführend ist, so lange die kryptischen Adressen an keiner Stelle im Seiteninhalt erscheinen stellt das in der Regel kein Problem dar.
\end{itemize}

\singlespacing
\textbf{Inhalte des HTTP-Header als Anfrage (Request) und Antwort (Response)}

\begin{itemize}
\item \textbf{HEAD} – \emph{bei HEAD Anfragen nur mit dem HTTP-Header antworten}\newline
 mit dieser Anfrage möchte der Client / die Suchmaschine nur den Status erfahren, also ob die Daten zur Verfügung stehen und ob sie sich geändert haben\newline
 (bei dynamischen Inhalten ist das in einigen Fällen nur durch den Entwickler zu übernehmen)\newline
Resultat: \textbf{weniger Traffic}
\item \textbf{Host:}\emph{– statische Inhalte von einer Static-Url / CDN (}Content Delivery Network)\emph{ beziehen}\newline
 die Eigenschaften einer Static-Url sind in der Regel eine andere Sub-Domain,\newline
von Vorteil ist auch wenn keine Cookies benötigt und benutzt werden, genau so wie eine längere Gültigkeit der Daten\newline
 Resultat: \textbf{paralleles Laden von Seitenbestandteilen (Verkürzung der Ladezeit), weniger Traffic}
\item \textbf{Access-Control-Allow-Origin: *} – \emph{beim beziehen von Daten z.B. Webfonts von einem externen Server\newline
}Resultat: Gültigkeits-Daten können überprüft werden, kein wiederholtes  Laden erforderlich
\item \textbf{Accept-Encoding: gzip, deflate}–\emph{deflate/Gzip-Komprimierung aktivieren}\newline
 Resultat: \textbf{weniger Traffic, Verkürzung der Ladezeit}
\item \textbf{Vary: Accept-Encoding}\newline
 hierdurch wird sichergestellt das ein Proxy eine sowohl eine komprimierte als auch eine unkomprimierte Version zur Verfügung stellen kann.
\item \textbf{Last-Modified: und Etag:} –\emph{ Gültigkeitsdaten mit übergeben (letzte Änderung und im Regelfall eine Checksumme)}\newline
 bei einer erneuten Abfrage kann über diese Werte ermittelt werden ob sich die Daten geändert haben.
\item \textbf{If-Modified-Since: und If-None-Match:} –\emph{ Gültigkeitsdaten überprüfen}\newline
 bei einer Anfrage mit diesen Werten kann mit Last-Modified: und Etag: verglichen werden, sind die Werte identisch sollte mit dem Status „HTTP/1.1 304 Not Modified“ geantwortet werden und keine Daten übermittelt werden\newline
 Resultat: \textbf{weniger Traffic, Verkürzung der Ladezeit}
\end{itemize}

\item           
\singlespacing
\textbf{Javascript Optimierung\newline
}

In Frameworks wie z.B. jQuery sind oftmals schnelle Lösungen für animierte Inhalte zu finden, sie sind aber nicht unbedingt kompakt und vom Aufbau her optimiert.

Bei großen Javascrips kann durch JSMin eine gute Komprimierung des Codes erzielt werden (entfernen unnötiger Zeichen), in der Entwicklungsphase wird jedoch eine Fehlersuche im betroffenen Javascript erschwert!

\singlespacing
\textbf{Stylesheet Optimierung}

Bei großen Stylesheets kann durch CSSMin eine gute Komprimierung des Codes erzielt werden (entfernen unnötiger Zeichen)

\singlespacing
\textbf{Mobile Website / Print Website\newline
}

Um sicher zu stellen das der Inhalt einer Website im richtigen Format angezeigt wird, ist es wichtig für die unterschiedlichen Medien Typen die entsprechenden Stylesheets mit zu liefern, gerade hinter einem Proxy-Server könnte es sonst zu Problemen kommen.
\begin{lstlisting}[breaklines]\&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;/styles/gocher-screen.css\&quot; media=\&quot;print, screen and (min-device-width: 481px)\&quot; /\&gt;
\&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;/styles/gocher-handheld.css\&quot; media=\&quot;handheld, only screen and (max-device-width: 480px)\&quot;; /\&gt;
\&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;/styles/gocher-print.css\&quot; media=\&quot;print\&quot; /\&gt;\end{lstlisting}

\singlespacing
\textbf{Bilddaten Optimierung}

PNGs sind GIFs vorzuziehen, jedoch ist zu bedenken das ältere Browser wie der IE6 Alpha-Transparenz nicht unterstützt,\newline
 JPGs sind für Photos vorzuziehen\newline
 zumindest sollten aber die Layout spezifischen Bilddaten optimiert bzw. komprimiert werden und nicht skaliert eingesetzt werden, kleine Symbole sollten zusammengefasst werden und über Stylesheet im Bildrahmen platziert werden (CSS-Sprites) dies ist allerdings nur sinnvoll wenn sie nicht in der Druckversion erscheinen müssen.\newline


\item           
\singlespacing
\textbf{Meta-Daten}

Im Allgemeinen ist darauf zu achten das wichtigste möglichst an den Anfang zu stellen, so sollte ein ein Title nicht „Für uns ist SEO wichtig“ sondern „SEO ist für uns wichtig“ lauten!\newline


\begin{itemize}
\item \textbf{Meta-Title:}\emph{Titel der in der Trefferliste des Suchdienstes erscheint} (10–70 Zeichen)\newline
Jede Eurer Seiten sollte idealerweise einen einzigartigen Title-Tag besitzen. Das hilft Google dabei zu erkennen, dass die Seite sich von anderen auf eurer Website unterscheidet.\newline
Titel können sowohl kurz als auch informativ sein. Wenn der Titel zu lang ist, zeigt Google nur einen Teil davon in den Suchergebnissen.
\item \textbf{Meta-Description:}\emph{Beschreibungstext der in der Trefferliste des Suchdienstes erscheint. }(70–160 Zeichen)\newline
Wählt eine Beschreibung, die sowohl informiert als auch Interesse weckt, denn der Meta-Tag Description  wird den Nutzern als Snippet in den Suchergebnissen angezeigt.
\item \textbf{Meta-Keywords:}\emph{Schlüssel-Begriffe zum Seiteninhalt}\newline
Verwendet nur Keywords die sich auf den Seiteninhalt beziehen nicht auf den Auftritt.
\item \textbf{Meta-Author:}\emph{Autor des Seiteninhalts}
\item \textbf{Meta-Lang:}\emph{Sprache in der der Seiteninhalt verfasst ist }
\end{itemize}

\singlespacing
\textbf{Seiten-Inhalt}

Wählt einen Titel, der den Inhalt (Content) der Seite effektiv kommuniziert. \newline


Es sollte nur eine Überschrift der Kategorie 1 (H1) geben, in der Regel der Titel der Seite (am Besten mit ein paar Keywords). Die Überschrift und der folgende Text erscheint bei Google in der Vorschau hervorgehoben!\newline
Wichtige Begriffe gehören in den Titel  oder in den Untertitel Überschrift der Kategorie 2 (H2).\newline
Zwischenüberschriften können häufiger vorkommen.

Anders sprachlicher Inhalt sollte durch eine Kennzeichnung der Sprache erfolgen (lang-Attribute).\newline
Abkürzungen sollten durch eine Kennzeichnung mit voller Bedeutung erfolgen (abbr-Tag).

Soll eine Seite an unterschiedlichen Stellen des Auftritts eingebunden werden, erzeugt keine Kopie, sondern legt eine neue Seite mit einer Weiterleitung auf das Original an (als Verweis im Mengengerüst)!

Falls eine Url schon vergeben ist wird am Ende ein Eindeutiger Schlüssel angehängt, dieser ist durch Umbenennung zu entfernen, unter Umständen macht es auch Sinn den Beitrag mit der schon existierenden Url abzuändern, denken Sie jedoch daran was mit den Verlinkungen auf diesen Beitrag geschieht!\newline


 Weitere Links zum Thema:\newline


\begin{itemize}
\item \href{https://support.google.com/webmasters/}{Google's Richtlinien für Webmaster}
\end{itemize}

\begin{floatingfigure}[r]{0.33\textwidth}
\centering
\includegraphics[width=0.25\textwidth]{/home/udo/webserver/www.gocher.me/www-root/media/PageSpeedDesktop.png}

Google Page Speed Desktop
\end{floatingfigure}

\begin{floatingfigure}[r]{0.33\textwidth}
\centering
\includegraphics[width=0.25\textwidth]{/home/udo/webserver/www.gocher.me/www-root/media/PageSpeedMobil.png}

Google Page Speed Mobil
\end{floatingfigure}
\end{document}