Kategorie: Web Frontend

Web Frontend

Kategorien
JavaScript Web Frontend

Google Earth API

Google bietet seit Jahren seinen freien Service Google Earth an, mit dem man die Möglichkeit hat, Daten auf einem Erdball  und einer detailierten 3D Erdoberfläche zu visualisieren.
Für mein nesues Projekt wo-bin-ich-jetzt.de, einen weltweiten GEO-Informationsservice, habe ich Google Earth eingebunden.


Sehenswürdigkeiten in Berlin
Die zentrale Developer Seite mit reichhaltigen Ressourcen bietet einen sehr guten Überblick über die API und einen Developer Guide und eine Google Earth API Reference.
Der User muss ähnlich wie bei Flash ein Plugin installieren, um Google Earth Daten anschauen zu können. Für die Entwicklung muss ein Google Maps API Key beantragt werden und dann kann es losgehen.

Probleme mit Google Earth

Wieso wird mein Marker nicht angezeigt?

Das kann daran liegen, dass der Zoom Faktor in der Ansicht so hoch ist, dass der Marker zwar da ist, aber nicht sichtbar. Aushilfe bringt setScale(10.0) für den 10 fachen Zoomfaktor:

var icon = ge.createIcon('');
 icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
 var style = ge.createStyle(''); //create a new style
 style.getIconStyle().setIcon(icon); //apply the icon to the style
 style.getIconStyle().setScale(10.0); //
 placemark.setStyleSelector(style); //apply the style to the placemark

Long als Variablen Name für Longitude (Breitengrad)

Der Fehler ist schnell gemacht, aber man sollte nie eine Variable long benennen, weil damit der Datentyp Long interpretiert wird, besser longitude verwenden.

Kategorien
SEO

Shop SEO mit schema.org

Mit schema.org können beliebiegen Textteilen einer Webseite maschinenlesbare Informationen über die Oberkategorie hinzugefügt werden.
Wenn man bspw. einen CD Online-Shop betreibt, kann man mit schema.org einer CD-Detail Seite Informationen über Interpreten, Release usw. kennzeichnen.

Kategorien
HTML5

HTML5 mit Boilerplate

Das HTML5 Framework Boilerplate bietet ein Grundgerüst für die Programmierung in dem neuen Webstandard HTML5 an und beinhaltet

  • eine Optimierung für mobile Endgeräte
  • Cross-Browser Kompatibilität insbesondere für die Internet Explorer Versionen
  • HTML5 Cross-Browser Kompatibilität über die Javascript Bibliothek modernizer
  • jQuery für sämtliche Javascript Arbeiten
  • .htaccess-Datei  mit gängigen Standardeinstellungen und Performance Optimierungen
  • Druck CSS Stylesheet
Kategorien
CSS

Cross Browser kompatibeles CSS mit YAML

Wer eine Chance haben will, dass seine Webseite in allen gängigen Browsern gleich aussieht, der ist gezwungen ein CSS Framework zu benutzen, welches die Unterschieder eine einzelnen Browser ausgleicht, wie z.B: YAML.

Sehr konfortabel ist auch der YAML Builder, mit dem verschiedene Layouts mit 1,2 oder 3 Spalten erstellt werden können.

Einbindung von YAML

  1. Als erstes müssen aus dem yaml source Ordner und die Ordner js und yaml in das Projektverzeichnis kopiert werden.
  2. Dann wird im YAML Builder das Layout zusammengeklickt und Get Code ausgewählt..
  3. Der HTML Code kommt in die index-Datei (oben rechts mit der Maus über das Dokument und dann copy to clipboard ).
  4. Die my_layout.css kommt in das Verzeichnis /css (muss angelegt werden). Das ist wichtig, weil sonst die Pfade nicht stimmen. Folgende Dateistruktur muss am Ende enstehen:

Kategorien
SEO

Google Panda Update SEO

Google hat mit seinem neusten Update ihres Ranking Algorithmusses den Kampf gegen schlechten und doppelten Inhalt aufgenommen.

Leider funktioniert das sehr gut, wie ich auf meiner Webseite wo-bin-ich-jetzt.de festellen musste. Am 12.8.2011 wurde das Update in Deutschland aktiviert und führte auf meiner Seite prompt zu einem Einbruch der Google-Besucher um -80%, weil dort ausschließlich doppelter Content von verschiedenen APIs verwendet wird.

Eingie Kriterien für schlechte Qualität von Inhalten sind

  • zu kurze Texte oder gar kein
  • keine Strukturierung der Texte mit Auszählungen und Überschrifthierachien (h1-h5)
  • einfache Keyword Wiederholungen ohne Sätze zu benutzen

Außerdem kann Google auch die Verweildauer auf der Webseite messen, wenn User über Google suchen, auf einen Link klicken und kurze Zeit später wieder zurück sind und weitersuchen. Ich habe beobachtet, dass besonders die Seiten mit schlechter Verweildauer besonders abgestrafft worden sind.

Die Lösung kann nur sein, den doppelten Inhalt zu verändern und in verschiedene Satzformen zu skripten, um einen attrativeren Content zu schaffen. Dabei muss auch auf die Eigenheiten der deutschen Sprache wie Fälle und Ein- und Mehrzahl geachtet werden.

Kategorien
CodeIgniter Framework SEO

$_GET Variablen in CodeIgniter und SEO

CodeIgniter hat aufgrund der Sichheitsprobleme von Get-Variablen dieses standmäßig deaktiviert, d.h. sie werden überschrieben beim Starten der Webseite.

Ein Möglichkeit GET-Variablen trotzdem zu nutzen und gleichzeitig suchmaschinenfreundliche URLs zu erzeugen ist:

$this->uri->segment(3)

Dieser Befehl gibt bei einer URL namens:http://www.foo.de/1/2/3/ den Wert 3 zurück.

Der Vorteil ist, dass keine Namen-Wert-Paare mehr in der URL befindlich sind, sondern nur noch die Werte, was die Länge der URL verkürzt und sehr seo freundlich ist. Der Nachteil ist, dass die Reihenfolge sich natürlich verändern kann und es dann zu Problen kommt.

Kategorien
SEO WordPress

Blog Katalogdienste nutzen bei WordPress um den Traffic zu erhöhen

Damit die eigene Meinung auf der ganzen Welt ankommt und nicht nur der eigen Freundeskreis von der verbalen Ergüssen genervt wird, bieten sich Katalogdienste an, die automatisch angepingt werden, wenn neue Artikel zur Verfügung stehen. Diese Dienste nehmen dann ihre Texte in ihre Suchmaschinen und Webseiten auf. Dabei muss beachtet werden, dass die richtigen Katalogdienste ausgewählt werden, weil Google gern Artikel bei anspruchlosen abstraft.

Eingefügt werden können diese Dienste unter Einstellungen->Schreiben->Update Services.

Eine Übersicht ist bei WordPress erhältlich.

Kategorien
SEO WordPress

Link-Sculpting ohne nofollow durch Link Maskierung mit Seo Ultimate

Klingt kompliziert, ist es aber nicht. Link-Sculpting bedeutet seine Link Struktur seiner Webseite so zu optimieren, dass die  von der Seite weg zeigenden Links entkräftet werden. Da mit jedem Link nach aussen mehr Gewicht auf den Linkpartner und weniger Gewicht auf die eigene Seite fällt, gilt es die ausgehenden Links zu optimieren.

Das Seo Ultimate Plugin von WordPress bietet dafür das geeignete Werkzeug: die „Link masks“, die unter jedem Artikel eingeblendet werden. Damit lassen sich Links erzeugen, die für die Suchmaschine auf die eigene Webseite zeigen und durch einen .htaccess Redirect für den Besucher das gewünschte Ziel ansteuern. Dabei wird darauf geachtet, dass der virtuelle  /go/ Ordner mit einem „302“ Redirect Moved Temporarily weiterleitet, den die Bots nicht weiter verfolgen.

Beispiel normaler Link: Sehenswürdigkeiten Berlin

Beispiel maskierter Link mit Redirect: Sehenswürdigkeiten Berlin

Zu Verdeutlichung habe ich mir im Firebug die Funktionsweise genauer angeschaut, allerdings muss man dafür sehr schnell klicken können oder Internet bei der Telekom haben, um rechtzitig vor dem Ausführen des Redirects das Folgende sehen zu können:

firebug_redirect_302_link_mask_sculp
firebug redirect 302 link mask sculp

Es wird also wirklich ein 302 Redirect gemacht, ausgelöst durch die Link Maskierung. Danach folgt ein 301 Redirect, der durch die .htaccess auf dem Server ausgelöst wird und die Anfrage von www.wo-bin-ich.de auf wo-bin-ich.de suchmaschinenfreundlich weiterleitet.

Kategorien
PHP SEO WordPress

Tutorial: SEO WordPress Blog in einer Stunde

Um eine Webseite zu pushen, d.h. mehr Besucher zu bekommen, gibt es 2 Möglichkeiten:

  1. On-Site Optimierung: Optimierung des Codes der Webseite, Linkstruktur und Content
  2. Off-Site Optimierung: Optimierung der Links, die auf die eigene Seite verweisen.

Eine Möglichkeit der Off-site Optimierung ist es, sich einen eigenen Blog einzurichten und mit möglichst passend Content zu den gewünschten Keywords auszustatten. Das geeignete Blog-System ist z.Z. WordPress in dem alle benötigten Funktionen enthalten sind bzw. schnell und komfortabel installiert werden können.

1.Schritt: WordPress Installation auf dem Webserver

Es gibt 3 Möglichkeiten der Installation:

  1. Die manuelle 5 Minuten Installation.
  2. Die noch schnellere Installation auf dem Webserver von WordPress, dafür wird nicht einmal eine Domain und eigener Serverspeicherplatz benötigt. Der Voreteil für die SEO ist, dass dieser Server eine andere IP-Adresse besitzt und somit nicht dem Besitzer zugeordnet werden kann. Außerdem ist die Installation kinderleicht, ohne Programmierkenntnisse und man erhält umsonst eine „foo.wordpress.com“ Domain. Der Nachteil ist, dass man keine Zugriff auf die Dateien hat und somit Code Änderungen nur begrenzt möglich sind.
  3. Die Installation beim eigene Web-Hoster: Hast alle Webhoster wie 1und1 oder Goneo bieten an auf dem Webspace WordPress per Click zu installieren, was sehr komfortabel ist.

2.Schritt: Das Datensammeln/Analytics

Weiterlesen „Tutorial: SEO WordPress Blog in einer Stunde“