Blog | 3dSEO.de SEO Agentur Münchenhttps://www.3dseo-neu.de/blog/2024-03-29T11:00:12+00:00Blog - SEO - Internetagentur - Django - Online Marketing - Entwicklung - CSS - Suche - ToolsZur Sicherheit: nginx Version nicht im Server Header anzeigen2015-01-15T15:23:54+00:002024-03-29T07:07:49+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/nginx-version-nicht-im-server-header-anzeigen/<h2>Warum die nginx Version nicht anzeigen?</h2>
<p>Der Hauptgrund für derlei Maßnahmen ist die Server Sicherheit. Je weniger Informationen man einem potentiellen Angreifer gibt, desto schwerer macht man ihm den Angriff. </p>
<h2>Wie finde ich die nginx Server Version heraus?</h2>
<p>In der Linux Kommandozeile (shell, bash, etc.):</p>
<p><code>$ curl -I http://www.webagentur089.de<br/><span>HTTP/1.1 200 OK <br/></span><span>Server: nginx/1.1.19 # <-- Das ist die gerade verwendete nginx Version <br/></span><span>Date: Wed, 14 Jan 2015 12:31:18 GMT<br/></span><span>Content-Type: text/html; charset=utf-8<br/></span><span>Connection: keep-alive<br/></span><span>Vary: Accept-Encoding<br/></span><span>Vary: Accept-Language, Cookie<br/></span><span>Content-Language: de</span></code></p>
<h2><span>Server Version nicht mehr anzeigen lassen</span></h2>
<p><span>In der Konfigurationsdatei nginx.conf</span></p>
<p><code><span>vi /etc/nginx/nginx.conf</span></code></p>
<p><span>innerhalb der http Konfiguration die folgende Zeile einfügen. Wenn https konfiguriert ist, dies für https wiederholen.</span></p>
<p><code><span>http {<br/>...<br/>server_tokens off;<br/>...</span></code></p>
<h2>nginx Dienst beenden und neu starten</h2>
<p><code>service nginx restart</code></p>
<h2>Überprüfen der Änderung</h2>
<p><code>$ curl -I http://www.webagentur089.de<br/>HTTP/1.1 200 OK<br/>Server: nginx<br/>Date: Wed, 14 Jan 2015 12:53:25 GMT<br/>Content-Type: text/html; charset=utf-8<br/>Connection: keep-alive<br/>Vary: Accept-Encoding<br/>Vary: Accept-Language, Cookie<br/>Content-Language: de</code></p>
<p></p>
<p>Quelle: <a href="http://wiki.nginx.org/HttpCoreModule#server_tokens">http://wiki.nginx.org/HttpCoreModule#server_tokens</a></p>Swap File auf Ubuntu 14.04 bei Amazon AWS EC2 aktivieren2014-08-22T11:08:11+00:002024-03-27T17:44:14+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/swap-file-aktivieren-ubuntu-amazon-aws-server/<h2>Wozu Linux Swapping?</h2>
<p>Ein <strong>Linux Swap File</strong> erlaubt dem Server mehr Speicher zu verwenden, als tatsächlich eingebaut ist. Das hat Vor- und Nachteile. Festplatten (auch SSD's) eines VPS Servers sind deutlich langsamer als der RAM Speicher. Die Server Performance wird bei der permanenten Nutzung eines<span> Swap Files einbrechen. Auf der anderen Seite kann ein Swap File extrem hilfreich sein, wenn der Server ausnahmsweise an seine Speichergrenze kommt. </span></p>
<p><strong>Ohne</strong> aktives Swap File führt das im schlechtesten Fall zum <strong>Crash und Serverausfall</strong>. Das ist für den SEO und den Unternehmer ein echtes Worst Case Szenario. Besucher bekommen nur eine <strong>Error 500</strong> Fehlermeldung zu sehen. Die Besucherzahlen und <strong>Umsätze brechen ein</strong>, die Bouncerate zurück zu Google steigt sprunghaft.</p>
<p>Blöd ist wenn gerade auch noch AdWords Anzeigen geschaltet werden und zusätzliche Kosten anfallen. </p>
<p>Besser achten wir gleich von Anfang an auf eine solche "Kleinigkeit".</p>
<h2>Amazon EC2 Ubuntu 14.04</h2>
<p>Beim Amazon EC2 Server<span> Template für Ubuntu (12.04 und 14.04) ist nach der Installation noch kein Swap File aktiviert. Anfangs bemerkt man dies evtl. nicht, erst wenn mehr Prozesse auf der Machine laufen, mehrere Domains gehostet werden und Lastspitzen auf den Server kommen. Dann kann die Performance stark einbrechen.</span></p>
<p>http://aws.amazon.com</p>
<h2>Cannot allocate memory</h2>
<p><span>Tritt bei der Installation neuer Python Pakete der Fehler "</span><span>Cannot allocate memory" mit folgender Fehlermeldung auf?</span></p>
<pre>Error [Errno 12] Cannot allocate memory while executing command python setup.py egg_info</pre>
<p><span>Das kann ebenfalls an zu wenig Speicher in Verbindung mit fehlendem Swap-File liegen.</span></p>
<p><span>Mit free -m überprüfen wir den vorhandenen Speicher:</span></p>
<pre>$ free -m</pre>
<p></p>
<p><span> </span></p>
<h2>Wie prüfe ich ob ein Swap File vorhanden ist</h2>
<p>Vor dem anlegen eines Swap File's, müssen wir checken ob es bereits eines auf dem VPS Server gibt und es aktiviert ist:</p>
<pre>sudo swapon -s</pre>
<p><span>Ein leeres Ergebnis bestätigt: das Swap File fehlt.</span></p>
<pre><span>$ sudo swapon -s<br/></span><span>Filename Type Size Used Priority</span></pre>
<p><span> </span></p>
<h2><span>Wie kann ich die File System Größe herausfinden?</span></h2>
<p><span>Nachdem wir nun wissen, daß kein Swap File auf dem Ubuntu Linux Server vorhanden ist, prüfen wir mit den <em>df</em> Befehl wie viel Festplattenplatz vorhanden ist. Für das Swap File benötigen wir auf kleinen bis mittleren Servern etwa 256MB bis 512MB freien Platz auf der Festplatte /dev/xvda1 </span></p>
<p></p>
<pre>$ df -h<br/><span>Filesystem Size Used Avail Use% Mounted on<br/></span><span>/dev/xvda1 7.9G 1.8G 5.8G 24% /<br/></span><span>udev 288M 8.0K 288M 1% /dev<br/></span><span>tmpfs 60M 184K 59M 1% /run<br/></span><span>none 5.0M 0 5.0M 0% /run/lock<br/></span><span>none 296M 0 296M 0% /run/shm</span></pre>
<p><span>Aktuell sind 5,8GB verfügbar, genug Platz für das Swap File.</span></p>
<h2><span>Swap File erstellen und aktivieren</span></h2>
<p><span>Eine 256MB große Swap Datei wird per dd Kommando erstellt:</span></p>
<pre>$ <span>sudo dd if=/dev/zero of=/swapfile bs=1024 count=256k</span></pre>
<p><span>if=/dev/zero mit dem spezial Device "/dev/zero" besteht die Eingabe aus lauter Nullen <br/>of=/swapfile ist der Dateiname des Swap Files<br/>mit bs=1024 und count=256k wird die Größe festegelgt. <br/><br/></span><span class="label label-danger">Achtung:</span> bei fehlerhafter Verwendung von dd kann man sich das System schrotten. In den Parametern if und of dürfen auf keinen Fall irgendwelche Leerzeichen sein! Die Verwendung erfolgt wie immer auf eigene Gefahr :-)</p>
<p><span> </span></p>
<p><span>Erzeugte Datei als Linux Swap Bereich vorbereiten:</span></p>
<pre>$ <span>sudo mkswap /swapfile</span></pre>
<p><span>Die Ausgabe dazu:</span></p>
<pre><span><br/></span><span>Setting up swapspace version 1, size = 262140 KiB<br/></span><span>no label, UUID=bc9ba5ac-ca06-1814-a231-be36bab3cdf8</span></pre>
<p><span> </span></p>
<p><span>Swap Datei aktivieren:</span></p>
<pre><span>$ sudo swapon /swapfile</span></pre>
<p><span>Das neue Swap File ist nun sichtbar in der Swap Übersicht:</span></p>
<p></p>
<pre>$ swapon -s<br/><span>Filename Type Size Used Priority<br/></span><span>/swapfile file 262140 0 -1</span></pre>
<p></p>
<p></p>
<p>Jetzt ist das Swap File aktiv, aber nur bis zum nächsten Reboot des Servers. Für eine permanente Aktivierung öffne ich die Datei /etc/fstab:</p>
<pre>sudo nano /etc/fstab</pre>
<p>und füge folgende Zeile ein:</p>
<pre>/swapfile none swap sw 0 0 </pre>
<p><span>Mit Swappiness auf 10 gesetzt, verhält sich das Swap File als Notfall Puffer und kann einen Servercrash wegen mangelndem Hauptspeicher verhindern.</span></p>
<p><span>Folgende Kommandos erledigen das:</span></p>
<pre><span>$ echo 10 | sudo tee /proc/sys/vm/swappiness<br/></span><span>$ echo vm.swappiness = 10 | sudo tee -a /etc/sysctl.conf</span></pre>
<p><span> </span></p>
<p>Zuletzt noch die Rechte anpassen, damit das Swapfile nicht für jeden lesbar ist:</p>
<pre>$ sudo chown root:root /swapfile<br/>$ sudo chmod 0600 /swapfile </pre>
<p><span> Berechtigung noch prüfen:</span></p>
<pre>$ ls -la /swapfile <br/><span>-rw------- 1 root root 268435456 Aug 22 12:40 /swapfile</span></pre>
<p><span>So soll das aussehen. Gut gemacht und Fertig! </span></p>
<p><span> </span></p>
<h2>Warum ist standardmäßig kein Swapfile aktiviert?</h2>
<p><span>Vermutlich liegt es am Design von EC2 in Verbindung mit dem EBS Speicher, speziell dem Typ "Provisioned IOPS (SSD) Volume". Dabei werden die E/A Operationen (Ein- / Ausgabevorgänge) pro Sekunde in Rechnung gestellt. Wenn es nun zu Problemen mit einem Programm kommt und sehr oft auf das Swapfile zugegriffen werden muß können hohe Kosten entstehen. Siehe hierzu: Amazon EBS Preise <a href="http://aws.amazon.com/de/ebs/pricing/">http://aws.amazon.com/de/ebs/pricing/</a>.</span></p>
<p>Zur Sicherheit sollte im "CloudWatch" Dashboard eine Kosten-Warnung eingerichtet werden!</p>
<p><span>Das gilt nicht für EBS Standard-Volumes (SSD). Dieser Speichertyp wird nur anhand der bereitgestellten Menge an GB pro Monat berechnet. Die E/A Leistung ist im Preis enthalten. </span></p>
<p><span> </span></p>Django Template Filter - extra CSS Klasse zu formfields2014-03-13T11:28:18+00:002024-03-28T21:43:06+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/django-template-filter-css-klasse-formfields/<p>In Mezzanine Formular Feldern fehlt die Bootstrap 3 CSS Klasse “form-control”. Damit die BS3 Design Vorgaben in Mezzanine Formularen angewendet werden kann ein ganz einfacher aber hilfreicher Template-Filter geschrieben werden.</p>
<p>Dieser wird in einer beliebigen App im Unterverzeichnis “templatetags” abgelegt. Im Verzeichnis unbedingt auch die Datei __init__.py erzeugen, damit Django den Filter finden kann.</p>
<p>Hier der Code in der Datei meine_app/templatetags/addcss.py</p>
<pre>from django import template<br/>register = template.Library()<br/><br/>@register.filter(name='addcss')<br/>def addcss(field, css):<br/> return field.as_widget(attrs={"class":css})</pre>
<p>Im Template wird der Filter geladen und mit folgendem Code verwendet:</p>
<pre>{% load addcss %}<br/><br/>{{field|addcss:"form-control"}}</pre>
<p>Damit wird dem Formfield die CSS Klasse “form-control” angehängt und das Ergebnis ist wie gewünscht.<br/>Happy Coding.</p>Bing ergänzt Webmaster Richtlinien zum Keyword Stuffing2014-02-21T19:57:09+00:002024-03-28T21:04:41+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/bing-keyword-stuffing-webmaster-richtlinien/<p><strong>Bing hat die Richtlinien für Webmaster klammheimlich mit einer eindringlichen Warnung für alle Webmaster ergänzt.</strong></p>
<p>Wer seine Inhalte unnötig und maßlos mit Schlüsselwörtern vollstopft, soll in Zukunft abgestraft werden. Dabei geht es natürlich in erster Linie um Manipulationsversuche mit dem Ziel bei Bing (oder bei anderen Suchmaschinen) bessere Rankings zu erhalten.</p>
<p>Mit dieser Regeländerung “droht” Bing sogar, entsprechende Seiten ganz aus dem Index zu entfernen. Ob manuelle oder automatisierte Maßnahmen greifen sollen ist nicht klar.<br/>Das <strong>Keyword Stuffing</strong> eine <strong>veraltete SEO Maßnahme</strong> ist, hat sich durch den “Content Marketing Hype” vielleicht schon weit herumgesprochen. Die Umsetzung dieser Regel von Bing wird also vermutlich vor allem ältere, schlecht gepflegte (Satelliten-)Seiten treffen. Zumindest im Moment sind noch eine ganze Reihe entsprechender Seiten im Bing Index auf vorderen Plätzen zu finden.</p>
<p>Wenn Bing die angekündigten Änderungen tatsächlich konsequent umsetzen kann, dürfte das die Qualität der<br/>Bing SERPS verbessern.</p>
<p>Erfreulich für die <del>wenigen</del> Nutzer von Bing in Deutschland. Nicht erfreulich für Betreiber von Satelliten-Farmen, die (immer noch) mit ganz wenig Aufwand zusätzlichen Traffic über Bing generieren.</p>Zugriff auf die aktuelle URL im Django Template2014-01-18T09:22:41+00:002024-03-29T06:46:01+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/zugriff-auf-die-aktuelle-url-im-django-template/<p><strong>Wie lässt sich die aktuelle URL der Webseite im Django Template abfragen?</strong></p>
<p>Da ich das immer wieder benötige (Facebook Like Buttons, …) brauche ich auch einen schnellen Zugriff darauf, ohne auf das Sites Framework zuzugreifen.</p>
<p>Die integrierte Template-Methode “build_abslolute_uri” läßt sich hierfür zusammen mit dem “request object” verwenden:</p>
<p>In settings.py:</p>
<pre>TEMPLATE_CONTEXT_PROCESSORS = (
# ...
'django.core.context_processors.request',
# ...
)</pre>
<p>Dadurch wird {{ request }} in den Templates verfügbar. Und nun kann ich in jedem Template auf die aktuelle URL zugreifen:</p>
<pre>{{ request.build_absolute_uri }}</pre>
<p>Damit erhalte ich die vollständige URL inklusive dem Präfix http:// und der Domain.</p>
<p>Für die Verwendung in einem Facebook Like Button ist es noch ratsam, die URL sicherheitshalber entsprechend zu codieren:</p>
<pre>{{ request.build_absolute_uri|urlencode }}</pre>
<p>Fertig!</p>
<p>Es sind weder eine Middleware noch andere umständliche Klimmzüge über das Site-Framework nötig. </p>
<p>Happy Coding :-)</p>Bootstrap 3 Tooltips Farbe ändern2013-11-22T07:30:17+00:002024-03-28T15:38:19+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/bootstrap-3-tooltip-farbe-aendern/<p><strong>Wie läßt sich die Farbe der Tooltips im <a href="http://getbootstrap.com/javascript/#tooltips" target="_blank">Bootstrap Framework</a> ändern? Die richtigen Style Anweisungen zu finden ist etwas schwierig, da sie vom Javascript nur in den HTML-Quelltext geschrieben werden, solange sich die Maus über der entsprechenden Stelle befindet.</strong></p>
<p>Um die Farben des Tooltips zu ändern, müssen zwei Klassen in der eigenen CSS-Datei überschrieben werden. Am Beispiel “Tooltip oben” sollen die Farben so geändert werden, daß der Hintergrund weiß mit einem farbigen Rahmen (Farbe #cccccc) und die Schriftfarbe schwarz ist. Damit auch der Pfeil entsprechend angepasst wird überschreibe ich folgende beiden Klassen:</p>
<pre>/* Tooltip Anpassungen */<br/>.tooltip.top .tooltip-arrow {<br/> bottom: 0;<br/> left: 50%;<br/> margin-left: -5px;<br/> border-top-color: #fff;<br/> border-width: 5px 5px 0;<br/>}<br/>.tooltip-inner {<br/> color: #000;<br/> background: #fff;<br/> border: 1px solid #cccccc;<br/> border: 1px solid rgba(0, 0, 0, 0.2);<br/> border-radius: 4px;<br/> -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);<br/> box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);<br/>}<br/>/* Bootstrap 3 Ende Tooltip */</pre>
<p>Die Farbe des Pfeils wird innerhalb der <em>.tooltip-arrow</em> Anweisung durch den Eintrag “border-top-color” festgelegt.</p>
<p>Für Tooltips, die auf der linken Seite angezeigt werden sollen sieht der Code nun so aus:</p>
<pre>.tooltip.left .tooltip-arrow {<br/> top: 50%;<br/> right: 0;<br/> margin-top: -5px;<br/> border-left-color: #fff;<br/> border-width: 5px 0 5px 5px;<br/>}</pre>
<p>Für Tooltips auf der rechten Seite wird “border-right-color” geändert:</p>
<pre>.tooltip.right .tooltip-arrow {<br/> top: 50%;<br/> left: 0;<br/> margin-top: -5px;<br/> border-right-color: #fff;<br/> border-width: 5px 5px 5px 0;<br/>}</pre>
<p>Und zuletzt noch für Tooltips die nach unten zeigen sollen:</p>
<pre>.tooltip.bottom .tooltip-arrow {<br/> top: 0;<br/> left: 50%;<br/> margin-left: -5px;<br/> border-bottom-color: #fff;<br/> border-width: 0 5px 5px;<br/>}</pre>
<p>Ich hoffe, daß hilft und gibt genug Anregung wo mit den Anpassungen für die Tooltips begonnen werden muß.</p>Webseitenoptimierung in 6 Schritten2011-10-29T15:47:34+00:002024-03-29T11:00:12+00:00Christian Hoffmannhttps://www.3dseo-neu.de/blog/author/hoffmann/https://www.3dseo-neu.de/blog/webseitenoptimierung-in-6-schritten/<p><img alt="Webseitenoptimierung in 6 Schritten" class='"img-responsive' href="http://de.statista.com/statistik/daten/studie/251780/umfrage/kennzahlen-zum-suchmaschinen-markt-in-deutschland/" src="https://www.3dseo.de/static/media/uploads/blog/2014/webseitenoptimierung-in-6-schritten.jpg"/></p>
<p><strong>Möchten Sie mit Ihrer Webseite bei Google, Bing und anderen Suchmaschinen besser gefunden werden?</strong></p>
<p>Um gute Suchergebnisplätze bei den Suchmaschinen zu erhalten, muss eine Webseite viele Faktoren berücksichten. In diesem Artikel stelle ich sechs wichtige Maßnahmen vor, wie Sie eine einzelne Webseite für Suchmaschinen optimieren können.</p>
<p>In Deutschland werden rund 95 Prozent aller Suchanfragen über Google in Auftrag gegeben (Quelle: <a class="external" href="http://de.statista.com/statistik/daten/studie/251780/umfrage/kennzahlen-zum-suchmaschinen-markt-in-deutschland/" title="Statista">Statista</a>, Stand Dezember 2012). Deshalb beschränke ich mich in diesem Artikel auf die Optimierung für Google, wobei die Umsetzung der Maßnahmen auch für die Auffindbarkeit in anderen Suchmaschinen nützlich ist.</p>
<p>Dabei gehe ich auf Title-Tag, Meta-Description, Überschriften, Content, Bilder und Quelltext ein. Wenn Sie die vorgestellten Vorschläge konsequent umsetzen, werden mit hoher Wahrscheinlichkeit bald Erfolge sichtbar.<br/> </p>
<h2>1. Title-Tag</h2>
<p>Der Title-Tag ist ein spezieller HTML-Tag, der einmal im Quelltext einer Seite vorkommen sollte. Den Inhalt des Tags stellt der Webbrowser oben in der Fensterleiste dar. Zugleich zeigen Suchmaschinen diesen Inhalt in ihren Suchergebnissen als anklickbare Überschrift an.</p>
<p>Beispiel: Eine Suche bei Google nach „Bratapfel“ liefert auf der ersten Seite einen Eintrag bei Wikipedia.</p>
<p><img alt="Title Tag im Google Suchergebnis" class="img-responsive" height="180" src="https://www.3dseo.de/static/media/uploads/blog/2014/.thumbnails/title-tag-beispiel-google-suchergebnis.png/title-tag-beispiel-google-suchergebnis-518x180.png" width="518"/></p>
<p>Der Quelltext dazu sieht so aus:</p>
<p><img alt="Title Tag im Quelltext der Webseite" class="img-responsive" height="170" src="https://www.3dseo.de/static/media/uploads/blog/2014/.thumbnails/title-tag-im-quelltext.png/title-tag-im-quelltext-462x170.png" width="462"/></p>
<p>Wenn das gesuchte Keyword im Title-Tag vorhanden ist, heben es Suchmaschinen im Ergebnis zusätzlich mit Fettschrift hervor. Dem Suchenden wird damit verdeutlicht, wie gut das einzelne Ergebnis zu seiner Suchanfrage passt. Je höher die Übereinstimmung, desto eher klickt der Nutzer auf den entsprechenden Link.</p>
<p>Ein guter, ansprechender Text im Title-Tag kann damit für eine höhere Klickrate und somit zu mehr Besuchern führen.</p>
<h3><title>-Tag auf einen Blick</h3>
<ul>
<li>Der Title-Tag muß dem tatsächlichen Inhalt der Seite entsprechen.</li>
<li>Die wichtigsten Keywords stehen im Title-Tag vorne.</li>
<li>Die Länge darf maximal 65 Zeichen (inkl. Leerzeichen) lang sein.<br/>Ab dem 66. Zeichen werden die Title-Tags auf den Ergebnisseiten in der Regel abgeschnitten und vermutlich auch niedriger eingewertet. In manchen Fällen unterstützt Google auch bis zu 70 Zeichen, abhängig von den verwendeten Buchstaben. Werden z.B. viele „kurze“ Buchstaben wie „l“ oder „i“ verwendet, sind auch bis zu 70 Zeichen möglich.</li>
<li>Wenn der Title-Tag aus mehreren Keywords besteht, die keinen lesbaren Satz ergeben, ist es sinnvoll, Trennzeichen zwischen den Keywords zu verwenden. Beispielsweise einen Bindestrich (-) oder das Pipe-Zeichen (|). Damit wird die Lesbarkeit für den Nutzer verbessert, was zu einer höheren Klickrate führen kann.<br/>Der Title-Tag könnte so aussehen: Notebook – Computer – Laptop.</li>
<li>Die Absichten der Suchenden beachten.<br/>Über welche Suchbegriffe kommen Nutzer auf Ihre Webseite? Lässt sich daraus bereits die Absicht der Nutzer ablesen? Wenn sich die Nutzer nur umsehen oder recherchieren möchten, sind beschreibende Title-Tags vorzuziehen. Wenn Sie sich dagegen sicher sind, dass die Suchenden mit direkter Kaufabsicht zu Ihnen kommen, etwas herunterladen oder eine angebotene Transaktion durchführen möchten, sollten Sie das schon im Title-Tag deutlich machen.</li>
<li>Ein kleiner Tipp:<br/>Verwenden Sie Title-Tags über Ihre ganze Website hinweg konsistent. Somit bauen Sie im besten Fall eine eigene Marke auf. Nutzer, die Ihre Webseiten in den Suchergebnissen sehen, erkennen sie wieder und entscheiden sich im besten Fall bewusst für Ihre Seite.</li>
</ul>
<div></div>
<h2>2. Meta-Description</h2>
<p>Die Meta-Description ist ein HTML-Metatag das einmal im Quelltext einer Webseite vorkommen soll. Es beschreibt den Inhalt der Seite möglichst kurz und prägnant. In den Suchergebnissen wird es meistens angezeigt und erfüllt damit praktisch den Zweck einer Textanzeige. Deshalb ist es wichtig, die entsprechenden Keywords dort auch unterzubringen. Darüber hinaus werden sie im Suchergebnis Fett hervorgehoben.</p>
<p>Wir bleiben beim „Bratapfel“ Beispiel:</p>
<p><img alt="Meta Description der Webseite wird im Google Suchergebnis angezeigt" height="205" src="https://www.3dseo.de/static/media/uploads/blog/2014/.thumbnails/meta-description-beispiel.png/meta-description-beispiel-524x205.png" width="524"/></p>
<p>Eine gute Meta-Description zu schreiben ist oft schwierig. Dabei sind genau diese kurzen Texte besonders wichtig, um Besucher von den Suchmaschinen am Ende auch zu bekommen. Selbst wenn man beispielsweise mit einem extrem häufig gesuchten Keyword wie „Notebook“ auf Platz 3 steht und die Metabeschreibung sich nicht um Notebooks sondern um Pferde drehen würde… unwahrscheinlich, gebe ich zu, aber die Klickrate wäre trotz einem riesigen Potential nicht besonders hoch.</p>
<h3>Regeln für eine gute Meta-Description</h3>
<ul>
<li>Die Länge darf aktuell maximal ca. 160 Zeichen betragen.<br/>Suchmaschinen zeigen Meta-Descriptions nur bis zu einer bestimmten Maximallänge an. Bei Google liegt der Wert derzeit bei 160 Zeichen.</li>
<li>Schreiben Sie die Texte für Menschen und nicht für Maschinen.<br/>Bei der Meta-Description handelt es sich im Prinzip um eine Textanzeige, die den User zum Besuch Ihrer Seite animieren soll. Deshalb möglichst sachlich, aber auch überzeugend und informativ sein.</li>
<li>Bleiben Sie immer bei der Wahrheit.<br/>Wenn der Inhalt nicht zum Versprechen in der „Textanzeige“ passt, sind die Besucher per Back-Button gleich wieder weg. Schade um die verpasste Chance.</li>
<li>Für Profis: Bei Bedarf Meta-Description gezielt weglassen.<br/>Es kann auch sinnvoll sein die Meta-Description weg zu lassen. Nach den vorangegangenen Punkten klingt das natürlich nicht besonders klug. Es gibt jedoch auch Situationen in denen man den Suchmaschinen die Erstellung der Beschreibung überlassen kann. Wenn z.B. eine Seite mit mehr als drei Keywords gleichzeitig und mit wenig Suchvolumen gefunden werden soll, man bezeichnet das als Long-Tail-Traffic, kann es manchmal nützlicher sein, die Beschreibung einfach wegzulassen. Damit überlassen Sie es der Suchmaschine, passende Texte aus Ihrer Webseite herauszufiltern.</li>
</ul>
<div><br/><br/></div>
<h2>3. Überschriften bringen Struktur – für Leser und Suchmaschinen</h2>
<p>In Büchern, Zeitschriften und anderen Textdokumenten werden Überschriften für die semantische Ordnung verwendet. Sie verbessern die Übersichtlichkeit und ermöglichen dem Leser, schneller zu erfassen worum es in einem Text geht.<br/><br/><span>Für Webseiten gilt das ebenso. Überschriften sind für den Leser wichtig und darum werten sie auch Suchmaschinen entsprechend hoch ein. Das wichtigste HTML-Tag im Inhalt der Seite ist aus SEO-Sicht die <h1>-Überschrift. Damit wird die erste Ebene der Überschriftenhierarchie eingeleitet.</span></p>
<p><img alt="H1 bis H6-Überschriften" height="187" src="https://www.3dseo.de/static/media/uploads/blog/2014/.thumbnails/h1-h2-bis-h6-ueberschriften.jpg/h1-h2-bis-h6-ueberschriften-480x187.jpg" width="480"/></p>
<p>Es ist sinnvoll in einer Seite möglichst nur eine <h1>-Überschrift zu verwenden, die inhaltlich zum Title-Tag passt. Darunter kommen dann in der 2. Ebene <h2>-Überschriften, die mehrmals verwendet werden können, und darunter wiederum <h3>-Überschriften. Versuchen Sie diese Hierarchieebenen einzuhalten und keine davon auszulassen.</p>
<p>Falsch: <h1> <h4> <h2> <h3></p>
<p>Richtig: <h1> <h2> <h3> <h2></p>
<p>Also nicht direkt unterhalb einer <h1>-Überschrift gleich eine <h4> verwenden, nur weil Ihnen die <h2> von der Schrift her zu groß wäre. Darunter leidet die logische Hierarchie Ihrer Seite.<br/><br/><span>Die Schriftgröße der h-Überschriften hat übrigens nichts damit zu tun, wie Suchmaschinen sie einwerten. Die richtige Semantik entsteht durch die Verwendung in der richtigen Reihenfolge. Die Formatierung von Schriftart und Schriftgröße lässt sich übrigens per CSS-Datei vom Webdesigner beliebig anpassen.<br/><br/></span><span>Ein häufiger Fehler besteht darin, <h1>-Überschriften gar nicht zu verwenden. Manche Webdesigner benutzen stattdessen entweder eine Grafik (schlecht, da sie nicht von Suchmaschinen gelesen werden kann) oder eine eigene CSS-Klasse wie beispielsweise „header“ die nicht mit einem <h1>-Tag verwendet wird.</span></p>
<p><strong><br/>Hier einige Praxisbeispiele:</strong></p>
<p>Falsch, die Überschrift wird mit der CSS-Klasse “mein-header” deklariert:</p>
<pre><span><span class=“mein-header“>Das ist die Hauptüberschrift auf der Seite</span></span></pre>
<p>Auf jeden Fall besser, aber nicht optimal, da der Quelltext dadurch unnötig lang wird:</p>
<pre><span><h1 class=“mein-header“>Das ist die Hauptüberschrift auf der Seite</h1></span></pre>
<p>So ist es richtig:</p>
<pre><h1>Das ist die Hauptüberschrift auf der Seite</h1><br/> </pre>
<h2>4. Content der Webseite</h2>
<p>Wie sieht ein Text aus, den Suchmaschinen lieben? Vergessen Sie diese Frage! Wichtiger ist vielmehr, was Ihre Leser bei Ihnen vorfinden möchten und präsentieren Sie den Inhalt so ansprechend, dass die Nutzer gerne wertvolle Zeit auf Ihrer Seite verbringen.</p>
<p>Besucher verlinken und teilen Ihre Seiten viel eher, wenn der Inhalt gut lesbar, sinnvoll und vor allem auch „gerne lesbar“ ist. Die Gewichtung von Keyword-Häufigkeiten ist heute für die meisten Suchmaschinen nur noch relativ gering. Klar sollten thematisch passende Schlüsselwörter auch im Text vorkommen, aber nur mit einer für den echten Leser angenehmen Häufigkeit.</p>
<h3>Regeln für suchmaschinenoptimierten Content:</h3>
<ul>
<li>Überfrachten Sie Ihre Seite nicht mit sich wiederholenden Keywords. Daraus resultieren meistens nur schlecht lesbare Texte.</li>
<li>Um eine Seite für ein bestimmtes Keyword zu optimieren, sollte es auf jeden Fall im Title-Tag stehen, in einer oder mehreren h-Überschriften (aber bitte nicht übertreiben) und natürlich auch im Text selbst.</li>
<li>Finden Sie zu Ihrem Keyword möglichst passende relevante, verwandte Begriffe, die Sie im Text ebenfalls verwenden. Durch dieses Vorgehen werden Zusammenhänge ausgebaut und die Wichtigkeit Ihres Haupt-Keywords gefestigt.</li>
</ul>
<h3>Fettschrift im Text</h3>
<p>Fettschrift mit den HTML-Tags <b> und <strong> stellt für SEO heute nur noch einen winzigen Faktor dar. Um noch mehr Optimierung aus den anvisierten Keywords rauszuholen, kann es aber durchaus sinnvoll sein, sie auch mal Fett zu schreiben.<br/><br/><strong>Ausserdem können solche Zeichenformatierungen für den Leser beim Überfliegen der Webseite von Nutzen sein.</strong> Aber auch hier gilt: nicht übertreiben!<br/> </p>
<h2>5. Bilder richtig verwenden</h2>
<p>Bilder werten Texte visuell auf und gleichzeitig dazu, die Inhalte verständlicher und attraktiver zu machen. Das können Sie für sich nutzen.<br/><br/><span>Im Gegensatz zum Menschen können Suchmaschinen mit Bildern nicht so viel anfangen wie mit Texten. Es ist viel schwieriger Bilder von einer Maschine automatisiert interpretieren zu lassen als reine Textinhalte. Zwar sind die großen Suchmaschinen bereits in der Lage, Text auf Bildern recht gut zu entziffern. Die abgebildeten Inhalte zuverlässig zu erkennen ist aber Zukunftsmusik.<br/><br/></span><span>Sie können es den Suchmaschinen erleichtern, indem Sie Ihrem Bild einen beschreibenden Dateinamen und eine zusätzliche Beschreibung im alt-Attribut mitgeben.<br/><br/></span><span>Die Suchmaschine weiß also nur durch Extraangaben, was auf dem Bild zu sehen ist. Sie tun damit auch Menschen einen großen Gefallen, die aufgrund einer Behinderung oder ihres Alters nicht in der Lage sind, die Bilder zu sehen. Eine aussagekräftige Beschreibung hilft diesen Menschen ein großes Stück weiter.<br/> </span></p>
<h3>Dateiname</h3>
<p>Ein Dateiname wie <i>“bild1234.jpg”</i> sagt nichts über den Bildinhalt aus. Ist der Bildname dagegen “<i>sandra-bullock.jpg”</i>, so läßt sich dem Bild über den Dateinamen zumindest schon eine prominente Schauspielerin zuordnen. Der Bildinhalt muss dabei natürlich zum Dateinamen passen.<br/> </p>
<h3>alt-Attribut – alternativer Text als Bildbeschreibung</h3>
<p>Bilder werden mit dem HTML-Tag <img> in die Webseite eingebaut. Zusätzlich kann im <img>-Tag ein alt-Attribut angeben werden, um den Bildinhalt näher zu erläutern. Darin beschreiben Sie am besten den genauen Bildinhalt. Wenn es geht auch in Verbindung mit einem oder mehreren der für diese Seite wichtigen Keywords, aber ohne dabei einfach nur Keywords aneinander zu reihen.<br/><br/><span>Im Beispiel eines Bildes von Sandra Bullock könnte das im Quelltext dann so aussehen:</span></p>
<pre><i><img src=“<a href="http://deine-seite.de/bilder/sandra-bullock.jpg">http://deine-seite.de/bilder/sandra-bullock.jpg</a>“ alt=“Foto von Sandra Bullock im Jahr 2006“></i></pre>
<p><span>Hinweis: Verwenden Sie bei den Attributen immer Anführungszeichen. Ohne wird nur das erste Wort für das alt-Attribut verwendet und der <img>-Tag enthält dann ungültige Parameter.<br/> </span></p>
<h3>Dateigröße von Bildern optimieren</h3>
<p>Bilder werden vom Webserver über das Internet bis zum Webbrowser des Nutzers übertragen und dort angezeigt. Je größer eine Bilddatei ist, desto länger dauert die Übertragung. Die Websitegeschwindigkeit wird deutlich erhöht, wenn Bilder mit möglichst passenden Dimensionen (Breite x Höhe) und in einem optimierten Dateiformat mit angepasster Komprimierung abgespeichert sind. Dieses Vorgehen empfiehlt auch Google (<a href="https://developers.google.com/speed/docs/insights/OptimizeImages" title="Optimize Images">siehe hier</a>).<br/><br/><span>Gute Ergebnisse erzielt die Grafiksoftware Photoshop. Wer dafür kein Geld ausgeben möchte, ist mit den kostenlosen Programmen wie IrfanView und </span><a href="http://www.gimp.org/" title="GIMP">GIMP</a><span> gut beraten.<br/> </span></p>
<h2>6. Fehlerfreier Quelltext</h2>
<p>Suchmaschinencrawler können innerhalb kürzester Zeit tausende von Seiten besuchen und lesen dabei die Quelltexte der Webseiten. Hierbei handelt es sich um Softwareprogramme mit Stärken und Schwächen.</p>
<p><br/>Als Website-Betreiber kann man ihnen die Arbeit erleichtern, indem die eigene Website an die gängigen Webstandards angepasst wird. Dazu gehört einen möglichst fehlerfreien Quelltext anzubieten. Die Webseite wird von den Suchmaschinen dadurch besser gelesen und interpretiert. Schließlich möchten Sie es ihnen so einfach wie möglich machen.</p>
<p><br/>HTML-Fehler können auch zu unerwünschten, manchmal unansehnlichen, Nebeneffekten bei der Anzeige in unterschiedlichen Webbrowsern und Browser-Versionen führen. Sie tun das also nicht nur für die Suchmaschine, sondern gleichzeitig auch für Ihre Besucher.</p>
<p>Auf w3.org wird ein kostenloses Werkzeug für die Fehlersuche zur Verfügung gestellt: der W3C Markup Validation Server – <a href="http://validator.w3.org/">http://validator.w3.org<br/> </a></p>
<p>Es müssen nicht immer alle gefundenen Fehler beseitigt werden, aber es ist ein guter Anfang die Liste abzuarbeiten. In der Regel sind Websites mit Templates (Vorlagendateien) aufgebaut. Es sind also nicht hunderte Einzelseiten zu korrigieren, sondern nur eine handvoll Template-Dateien.</p>
<h2>Fazit</h2>
<p>Das waren 6 wichtige Onpage-Faktoren, um eine einzelne Webseite für Suchmaschinen zu optimieren. Wenn Sie diese Maßnahmen umsetzen, haben Sie einen guten Anfang gemacht, um bei Google & Co. besser gefunden zu werden.<br/><br/><span>Ich wünsche Ihnen viel Erfolg für Ihre Homepage und positive Verbesserungen in den Suchmaschinen.</span></p>
<h2>Anmerkung zum Schluss</h2>
<p>Um diese Vorschläge überhaupt durchführen zu können, ist ein entsprechendes technisches Wissen notwendig, z.B. wo Änderungen bewerkstelligt werden. Gerade bei größeren Websites mit vielen Unterseiten kann das Auffinden und Verbessern viel Zeit in Anspruch nehmen. Je nachdem wie groß der Aufwand ist und welche Expertise Sie selber im Unternehmen haben, können Sie die Änderungen selbst durchführen.<br/><br/> Falls Sie weder das Wissen noch die Zeit haben entsprechende Maßnahmen bestmöglich umzusetzen, helfen wir Ihnen als <a href="http://www.3dseo.de/" title="SEO Experten in München">SEO-Experten</a> gerne mit Ihrer Unternehmenswebseite besser gefunden zu werden.<br/> </p>