Crashkurs: jQuery-Selektoren

Was ist jQuery?

Es ist eine Vereinfachung von JavaScript durch ein sogenanntes Framework, welches uns lästige Routinearbeit beim Programmieren abnimmt und einen einfachen Zugang zu schwer nutzbaren JavaScript-Methoden bietet.

JavaScript mit & ohne jQuery!

Für den Einstieg in das Thema möchte ich ein Beispiel mit JavaScript und den selben Effekt via jQuery zeigen.

JavaScript: (JavaScript_test1.html)

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script tyle="text/javascript">
window.onload = function() {
	var elements = document.getElementById("box").getElementsByTagName("p");
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].firstChild.data == "Zweiter Absatz") {
			elements[i].className = "green";
		}
	}
}
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Mit ein wenig Programmiererfahrung kann man den Quelltext direkt lesen und wer dieses Beispiel nicht versteht, sollte sich auf der folgenden Webseite umschauen > de.selfhtml.org/javascript/

jQuery: (jQuery_test1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:contains('Zweiter Absatz')").css({ 'color' : '#009933' });
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Wie man an diesem Beispiel erkennen kann, sind die “Selektoren” ein sehr wichtiger / umfangreicher Teil von jQuery.

jQuery-Selektoren

Als nächstes möchte ich einige jQuery-Selektoren und Methoden zum Auswählen von HTML-Elementen zeigen. Doch zuerst sollten wir die selben Werkzeuge zum ausführen & debuggen von JavaScript (jQuery) nutzen. Da JavaScript direkt im Browser kompiliert wird, könnten wir die Code-Zeilen auch direkt im Browser ausführen: Firefox + Firebug oder z.B. hier html5snippet.net

Selektiert alle HTML-Elemente von einem bestimmten Typ. -> z.B.: $(“p”)

(jQuery_selektoren1.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert HTML-Elemente mit einer bestimmten ID. -> z.B.: $(“#box”)

(jQuery_selektoren2.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

PS: ID’s müssen auf einer HTML-Seite einmalig sein!

Selektiert HTML-Elemente mit einer bestimmten CSS-Klasse. -> z.B.: $(“.box”)

(jQuery_selektoren3.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div div .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
</body>
</html>

Hier wurde die Auswahl noch einmal via HTML-Tags (div) eingeschränkt.

Selektiert HTML-Elemente und die Auswahl weiterer Selektoren. -> z.B.: $(“div + .box”)

(jQuery_selektoren4.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div + .box").addClass("green");
});
</script>
</head>
<body>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
<div>
	<div>
		<div class="box">
			<p>Erster Absatz</p>
			<p>Zweiter Absatz</p>
			<p>Dritter Absatz</p>
		</div>
	</div>
</div>
<div class="box">
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert alle HTML-Elemente X, die Kindknoten eines Elements Y sind. -> $(“X > Y”) -> z.B: $(“div > p”)

(jQuery_selektoren5.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div > p").addClass("green");
});
</script>
</head>
<body>
<div>
	<span>
		<p>Erster Absatz</p>
		<p>Zweiter Absatz</p>
		<p>Dritter Absatz</p>
	</span>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert alle folgenden Geschwisterknoten eines Elements X, die den Typ Y besitzen. -> $(“X ~ Y”) -> z.B: $(“#start ~ p”)

(jQuery_selektoren6.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#start ~ p").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="start">Erster Absatz</p>
	<p>Zweiter Absatz<p>
	<div>
		<p>Dritter Absatz<p>
	</div>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

Selektiert die Kombination aus allen durch die Selektoren gewählten Knoten. -> z.B: $(“#p1, #p2, #p3”)

(jQuery_selektoren7.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#p1, #p2, #p3").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p id="p1">Erster Absatz</p>
	<p id="p2">Zweiter Absatz</p>
	<p id="p3">Dritter Absatz</p>
</div>
</body>
</html>

Selektiert bestimmte HTML-Kind-Tags. -> z.B: $(“#box”).find(“p”)

(jQuery_selektoren8.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("p").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

(jQuery_selektoren9.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("#box").find("*").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert über Attribute. -> z.B: $(“div[id]”)

(jQuery_selektoren10.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id]").addClass("green");
});
</script>
</head>
<body>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert über Attribute und dessen Werte. -> z.B: $(“div[id=’box’]”)

(jQuery_selektoren11.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div[id='box']").addClass("green");
});
</script>
</head>
<body>
<div id="box1">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div id="box">
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert über HTML-Tags und dessen Anordnung in der HTML-Struktur. -> z.B: $(“div:first”)

(jQuery_selektoren12.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:first").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

(jQuery_selektoren13.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:last").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>
</html>

Selektiert alle Elemente mit geradem Index innerhalb der aktuellen Auswahl. (0 ist even) -> z.B: $(“div p:even”)

(jQuery_selektoren14.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:even").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

Selektiert alle Elemente mit ungeradem Index innerhalb der aktuellen Auswahl. (1 ist odd) -> z.B: $(“div p:odd”)

(jQuery_selektoren15.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:odd").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>
</html>

Selektiert alle Elemente die nicht zutreffen. -> z.B: $(“div:not(:last)”)

(jQuery_selektoren16.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:not(:last)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert Elemente, die innerhalb der aktuellen Auswahl einen bestimmten Index haben. -> z.B: $(“div p:eq(1)”)

(jQuery_selektoren17.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:eq(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten größeren Index haben. -> z.B: $(“div p:gt(1)”)

(jQuery_selektoren18.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:gt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die innerhalb der aktuellen Auswahl einen bestimmten kleineren Index haben. -> z.B: $(“div p:lt(1)”)

(jQuery_selektoren19.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p:lt(1)").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die sich innerhalb der aktuellen Auswahl “bewegen”. -> z.B: $(“div p:animated”)

(jQuery_selektoren20.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	function run() {
		$("#test").slideToggle("slow",run);
	}
	run();

	$("div p:animated").addClass("green");
});
</script>
</head>
<body>
<div>
	<p id="test">Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die mindestens ein Element enthalten, auf die der Selektor zutrifft. -> z.B: $(“div:has(‘span’)”)

(jQuery_selektoren21.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div:has('span')").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die Elternelement eines anderen Knotens sind. (also sowohl von Element- als auch Textknoten) -> z.B: $(“p:parent”)

(jQuery_selektoren22.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:parent").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<p></p>
	<p>Zweiter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die über ein bestimmtes Attribut verfügen. -> z.B: $(“[name]”)

(jQuery_selektoren23.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("[name]").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die über ein bestimmtes Attribut mit einem bestimmten Wert verfügen. -> z.B: $(“span[name=’Zweiter_Absatz’]”)

(jQuery_selektoren24.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span[name='Zweiter_Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<span name="Zweiter_Absatz">Zweiter Absatz</span>
	<p name="Dritter_Absatz">Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Selektiert ein Element, wenn das Attribut einen bestimmten Wert, oder den bestimmten Wert mit einem “Bindestrich” abgetrennten String folgt -> z.B: $(“p[name|=’Absatz’]”)

(jQuery_selektoren25.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name|='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

Selektiert ein Element, wenn der Wert des benannten Attributs den übergebenen String als Substring enthält. -> z.B: $(“p[name*=’Absatz’]”)

(jQuery_selektoren26.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name*='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz-Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz-Vierter">Vierter Absatz</p>
</div>
</body>

Selektiert ein Element, wenn der Wert des benannten Attributs durch Leerzeichen abgetrennten Teilwert des benannten Attributes oder dem vollständigen Wert entspricht. -> z.B: $(“p[name~=’Absatz’]”)

(jQuery_selektoren27.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name~='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz Erster">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die nicht einem bestimmten Attribut entsprechen. -> z.B: $(“p[name!=’Absatz’]”)

(jQuery_selektoren28.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name!='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="Absatz Vierter">Vierter Absatz</p>
</div>
</body>

Selektiert alle Elemente, die mit einem bestimmten Attribut beginnen. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren29.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p[name^='Absatz']").addClass("green");
});
</script>
</head>
<body>
<div>
	<p name="Erster_Absatz">Erster Absatz</p>
	<p name="AbsatzZweiter">Zweiter Absatz</p>
	<p name="Absatz_Dritter">Dritter Absatz</p>
	<p name="VierterAbsatz">Vierter Absatz</p>
</div>
</body>

Selektiert alle Knoten, die der erste (letzte) Kindknoten ihres Elternelements sind. -> z.B: $(“p[name^=’Absatz’]”)

(jQuery_selektoren30.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p:first-child, p:last-child").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Erzeugt ein neues jQuery-Objekt aus dem unmittelbar folgendem Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).next(‘span’)

(jQuery_selektoren31.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").next('span').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

(jQuery_selektoren34.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").next().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Holt die Kindelemente jedes Elements der Auswahl. -> z.B: $(“div”).children()

(jQuery_selektoren32.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div").children().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Erzeugt eine neue Auswahl aus den Elternknoten jedes Elements der aktuellen Auswahl. -> z.B: $(“span”).parent()

(jQuery_selektoren33.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").parent().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
<div>
	<p>Erster Absatz</p>
	<p>Zweiter Absatz</p>
	<p>Dritter Absatz</p>
</div>
</body>

Erzeugt ein neues jQuery-Objekt aus den unmittelbar vorherigen Geschwisterknoten des Elemente der aktuellen Auswahl. -> z.B: $(“span”).prev()

(jQuery_selektoren35.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").prev().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Erzeugt ein neues jQuery-Objekt aus allen folgenden Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).nextAll()

(jQuery_selektoren36.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").nextAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Erzeugt ein neues jQuery-Objekt aus allen vorherigen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“p”).prevAll()

(jQuery_selektoren37.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("p").prevAll().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
</div>
</body>

Bildet eine Auswahl aus allen Geschwisterknoten der Elemente der aktuellen Auswahl. -> z.B: $(“span”).siblings()

(jQuery_selektoren38.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

(jQuery_selektoren39.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("span").siblings().add("span").addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor entsprechen. -> z.B: $(“div p”).filter(‘:contains(Erster Absatz)’)

(jQuery_selektoren40.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").filter(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

Bildet auf der Decendant-Achse der Elemente der aktuellen Auswahl eine neue Auswahl aus Elementen, die dem angegebenen Selektor nicht entsprechen. -> z.B: $(“div p”).not(‘:contains(Erster Absatz)’)

(jQuery_selektoren41.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$("div p").not(':contains(Erster Absatz)').addClass("green");
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
</body>

(jQuery_selektoren42.html)

<html>
<head>
<title>JavaScript mit und ohne jQuery!</title>
<style type="text/css">
.green { color: #009933; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	var auswahl = $("div p");

	auswahl.clone().appendTo('#test');
	auswahl.not(':contains(Erster Absatz)').addClass("green").end().css({ 'color' : 'red', 'background-color' : 'black' }).last().css({ 'color' : 'yellow'});
});
</script>
</head>
<body>
<div>
	<p>Erster Absatz</p>
	<span>Zweiter Absatz</span>
	<p>Dritter Absatz</p>
	<p>Vierter Absatz</p>
</div>
<br>
<div id="test"></div>
</body>

jQuery-Beispiel

Zum Schluss möchte ich noch ein einfaches Beispiel mit Selektoren zeigen …

(jQuery-Selektoren_test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>jQuery-Selektoren | Beispiel</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>TEST: JPEG + PNG</h1>

<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG.png" alt="PNG: Original > 10 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_PNG_punypng.png" alt="PNG: Optimized > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_100.jpg" alt="JPEG: 100% Qualität > 27 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_80.jpg" alt="JPEG: 80% Qualität > 9 KB" height="54">
</div>
<div class="pic_all" style="float: left; overflow: hidden; width: 85px; height: 54px; margin: 0 3px 3px 0; text-align: center; border: 1px solid #ffffff;">
	<img src="SUCKUP_JPEG_60.jpg" alt="JPEG: (60% Qualität > 7 KB" height="54">
</div>

<br clear:both><div style="float:left">
	<img style="margin-top: 50px; margin-left: -450px;" id="refMain" src=""><br>
	<div style="width: 420px; margin-left: -450px;" id="imageText"></div>
</div>

<script type="text/javascript">
$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
$(document).ready(function() {
	$('div.pic_all').each(function() {
		$(this).mouseenter(function() {
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			$('div.pic_all').css({ 'border-color' : '#ffffff', '-moz-opacity' :'0.4' });
			$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			var src_new = $(this).find('img').attr('src');
 			$('#refMain').attr('src', src_new);
 			var text_new = $(this).find('img').attr('alt');
 			$('#imageText').html(text_new);
		});
		$(this).mouseleave(function() {
			$(this).css('border-color', '#ffffff').css('-moz-opacity', '0.4');
			if ($(this).find('img').attr('src') == $('#refMain').attr('src')) {
				$(this).css('border-color', '#EE398C').css('-moz-opacity', '1');
			}
		});
 	});
});
</script>

</body>
</html>

Die Grundlagen der Suchmaschinen-Optimierung

Vorwort:

Ich möchte hier eine kurze Einführung in das Thema “Suchmaschinen-Optimierung” (SEO) geben. Das Thema ist in den letzten Jahren immer Umfangreicher geworden, da es immer mehr Webseiten mit ähnlichen Themen gibt, welche miteinander um die ersten Plätze bei Google und Co. konkurrieren.

Warum man sich mit dem Thema beschäftigen sollte wird erst richtig klar, wenn man sich folgende Zahlen anschaut -> 85% der Internetnutzer rufen nach dem Start des Browsers mittels einer Suchmaschine Inhalte auf, dabei hat Google 90-95% Marktanteil in Deutschland, so dass wir uns darauf konzentrieren sollten. Nach welchem Muster (Algorithmus) Google die Webseiten bewertet ist jedoch nicht 100% bekannt, aber es soll von über 200 Faktoren abhängen, dabei unterscheidet man grob in zwei Kategorien “Onpage”- & “Offpage”-Faktoren.

Onpage-Faktoren: (auf der jeweiligen Webseite)

8.) “double Content” (intern)

9.) korrekte Weiterleitungen (Redirects)

10.) die Struktur der URL

11.) Menü & Seitenstruktur

12.) interne Verlinkung

13.) Ladegeschwindigkeit

14.) 404-Fehlerseiten optimieren

15.) fehlerfreien Quellcode (HTML, XHTML, …)

16.) kein Blackhat-SEO verwenden

17.) kein Intro / Flash- & Java-Anwendungen vermeiden

18.) RDFa-Attribute (Rich Snippets) im HTML-Code

19.) stetige Aktualisierung

20.) Usability & Optik

21.) Seriosität & Glaubwürdigkeit

1.) Content is King

An erster Stelle sollte man sich in die “Zielgruppe” hineinversetzen, um möglichst einzigartigen Inhalte (Content) anzubieten welcher für den User einen Mehrwert bietet. Dieser Inhalt wird dann auch von anderen verlinkt und somit weiterempfohlen und von Google besser bewertet.

Da Google & Co. reine textbasierte Suchmaschinen sind, ist Content aus der Sicht von Google ausschließlich Text, jedoch sollte man für den User einen angemessenen Ausgleich zwischen Text & Bilder finden. Zudem sollte man frames & Iframes vermeiden und die Keyword-Häufigkeit im Text beachten, es damit aber auch nicht übertreiben, da die Bedeutung der Begriffe bei steigender Anzahl abnimmt. (3-8% Keywords gemessen am Gesamttext)

2.) Seitentitel

Der Titel-Tag sollte das Thema gut beschreiben und min. ein relevantes Keyword enthalten. Gegebenenfalls hilft es auch, wenn man manchmal einen etwas reißerischen Titel verwendet. ;) Optimale Länge sind 40 bis 100 Zeichen (~ 4 bis 10 Wörter).

<title>Der Seitentitel</title>

3.) Keywords

Die Auswahl, Platzierung und Häufigkeit der “Stichworte” ist auch von Bedeutung, da die Suchmaschinen die Relevanz der jeweiligen Themen so besser beurteilen kann. Dabei nutzt man meistens eine Mischung verschiedener Strategien, welche ich hier mit einem kleinen Beispiel verdeutlichen möchte:

Shorttail: “MP3-Player”

Midtail: “MP3-Player Testsieger”

Longtail: “Archos Vision MP3-Player mit TFT-Display “

Schreibweise: “MP3-Plyer Testsiger” (Info: Google korrigiert die Eingaben bei der Suche, daher funktioniert diese Methode nicht mehr so wie früher)

Keystroke (Google-Instant): “MP” anstatt “MP3-Player”

Folgende Webseiten können dabei helfen entsprechende Keywords zu finden, dabei sollte man jedoch nicht vergessen, dass man ggf. Leute hinzuziehen sollte, welche sich mit dem Thema auskennen

– KeywordToolExternal

– Google-Instant

– Assoziationsanalys

<meta name="keywords" content="Suchbegriffe, mit Komma, getrennt">

4.) (Meta-)Tags

Es gibt eine ganze Reihe von Meta-Tags, jedoch werden nicht alle von den Suchmaschinen berücksichtigt. Daher folgt eine Liste der wichtigsten Meta-Tags:

(Verwendet man XHTML statt HTML, muss ein abschließender Slash “/” am Ende der Tags hinzufüg werden, um gültigen Quellcode anzubieten. )

<meta name="description" content="Seiten-Beschreibung">

Auch die “Beschreibung” sollte einige relevante Suchbegriffe (Keywords) enthalten und zum ein gewissen Interesse wecken. 1 bis 3 Sätze in 140-160 Zeichen.

Google indexiert zwar dieses Meta-Tag, zeigt es aber nur an, wenn die Seite entweder keinen text enthält oder von besonderer Relevanz ist. Ansonsten werden kurze Textauszug aus einer Webseite, sogenannte “Snippets” oder Daten aus dem “Open Directory” verwendet.

<meta name="robots" content="all">

Dieser Tag dient neben der robots.txt zur Steuerung von Suchmaschinen-Crawlern. Ein Beispiel-Code ist: http://www.google.com/support/webmasters/

content	Beschreibung
index /noindex	die Seite soll indexiert / nicht indexiert werden
follow /nofollow	Links sollen weiterverfolgt / nicht weiterverfolgt werden
noarchive	die Seite soll nicht gespeichert (google-cache) werden
nosnippet	verhindert, dass ein Ausschnitt in den Suchergebnissen angezeigt wird
noodp	für die Seite soll nicht die Beschreibung von “Open Directory” verwendet werden

PS: wenn gewünscht kann man die Einstellungen (wie auch in der robots.txt) für bestimmte Suchmaschinen bestimmen: z.B.: <meta name=”googlebot” content=”noarchive”>

Als Beispiel kannst du dir einfach mal die robot.txt von dieser & anderen Webseiten anschauen z.B.: http://suckup.de/robots.txt

<link rel="alternate" type="application/rss+xml" title="RSS-Feed - suckup.de" href="/feed">

Sollte ein RSS-Feed vorhanden sein (aus einem Blog- oder CMS-System) kann und sollte dieser per Meta-Tag & auf der Webseite angegeben werden.

<link rel="canonical" href="http://example.org">

“Oft kommt es vor, dass mehrere URIs auf den gleichen Inhalt verweisen. Beispiele sind dynamisch generierter Inhalt, wie in Foren oder anderen CM-Systemen, bei denen die gleichen Einträge unter verschiedenen Adressen abrufbar sind, Druckansichten von Webseiten oder auch lokale Kopien von Dateien, wie beispielsweise Lizenzen. In diesen Fällen kann mit dem Canonical Link der Haupt-URI angegeben werden, unter dem der Inhalt erreichbar ist. Verlinkende Webseiten, insbesondere Suchmaschinen mit ihren Linkdatenbanken, können so das Orignaldokument zu einer Seite finden und darauf in den Suchergebnissen verweisen.” – http://de.wikipedia.org/wiki/Canonical_Link

Aber Google verarbeitet nicht nur Meta-Tags, auch Standard-HTML-Tags helfen der Suchmaschine zu verstehen welche Wörter von Bedeutung sind und welche nicht, dazu kann man z.B. den Text in verschiedenen Bereiche mit eigenen Überschriften aufteilen (h1, h2, h3 …), sortierte & unsortierte Liesten (ul, ol) erstellen, bestimmte Begriffe hervorheben (strong) und vieles mehr. Alle diese HTML-Tags sollten jedoch auch korrekt eingesetzt werden: z.B.:

Falsch ->

<div class="ueberschrift-h1>Test</div>

<h1 class="ueberschrift-h1>Test</h1>

Richtig ->

<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
[...]
<h1>Test</h1>

5.) (Google) Sitemap

“Mithilfe von XML-Sitemaps kann Google Seiten auf Ihrer Website finden, die anderenfalls unter Umständen übersehen werden. Einfach gesagt ist eine XML-Sitemap eine Liste der Seiten Ihrer Website.” – http://www.google.com/support/webmasters/bin/answer.py?hl=de&answer=156184

z.B.: suckup.de/sitemap.xml

6.) Bilder

Die Dateigröße sollte als erstes nicht zu groß sein!! Zudem sollten Bilder an der richtigen Stelle im Text untergebracht werden, so dass die Suchmaschine und auch der Leser den Zusammenhang zwischen Bild & Text leichter herstellen kann.

Keyword-basierte Dateinamen: Am besten beschreibt der Dateiname selbst bereits das Bild (z.B. Ubuntu_Logo_klein.png, Android_Froyo.png …)

Alt- und Title-Tags verwenden: “Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Geben Sie darin einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. Das sollte bei rein illustrierenden Schmuckgrafiken in der Form alt=”” geschehen, um die Grafik als inhaltslos zu kennzeichnen. Vermeiden Sie es in solchen Fällen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie “spacer.gif” o.ä. zu befüllen.” – http://de.selfhtml.org/html/grafiken/einbinden.htm

Die beiden Tags können auch unterschiedliche Inhalte haben sollten jedoch das Bild / Produkt näher beschreiben (z.B.: <img width=”150″ height=”150″ src=”Windows8_Bluescreen.jpg” title=”Bluescreen von Windows 8″ alt=”Bluescreen von Windows 8″>

PS: die Angabe der höhe und breite beschleunigt den Seitenaufbau, da der Browser nicht erst schauen muss, welche Ausmaße das Bild hat.

Qualität der Bilder: Google kann qualitativ minderwertige Bilder, welche z.B. zu hoch komprimiert wurden (JPEG) erkennen, daher sollte man meistens auf PNG-Bilder zurückgreifen, welche verlustfrei komprimiert werden können. | suckup.de/bilder_test/index.html

PS: extrem große Bilder sollten weiterhin im JPEG-Format gespeichert werden

7.) Domainwahl

Du solltest für ein Projekt / Produkt am besten eine eigene, einprägsame Domain registrieren, zudem zieht Google das alter der Domain als Kriterium hinzu. Kostenlose Angebote wie z.B. “*.co.cc” Domains hat Google gänzlich aus seinem Index verbannt, um Spam zu verhindert.

8.) “double Content” (intern)

Derselbe Artikel (oder größere Textauszüge davon) sollten z.B. nicht über verschiedene Domain erreichbar sein.

Beispiel:

http://voku-online.de/2011/06/20/epic-fail-bumblebee/

http://www.suckup.de/2011/06/20/epic-fail-bumblebee/

https://suckup.de/2011/06/20/epic-fail-bumblebee/

————-> http://suckup.de/2011/06/20/epic-fail-bumblebee/

Wenn du automatisiert doppelten Content produzierst (z.B. RSS, Druckseiten, verlinkte Themenseiten), können diese via robots.txt global, oder für die jeweilige Seite, durch die Meta-Tags (noindex, nofollow) aus der Indexierung herausgenommen werden.

Zudem kann man auch noch einen “Canonical Link” einfügen, welcher dabei helfen soll die Original-Quelle zu belegen & per .htaccess verbieten die Bilder auf deiner Webseite von extern (Webseiten) aufzurufen.

9.) korrekte Weiterleitungen (Redirects)

Wenn man seine Seite auf eine neue Domain umzieht, sollte man die Inhalte direkt auf die neue Ziel-Domain weiterleiten und nicht etwa auf die neue Startseite verweisen, hingegen sollte man für temporäre Umleitungen 302-Redirects anstatt permanente 301-Redirects. Hier ein paar Beispiele wie man eine Weiterleitung per .htaccess erstellt: .htaccess & mod_rewrite

mehr Infos: Weiterleitungen

10.) die Struktur der URL

An die URL stellt man die selben Anforderungen wie an den Titel, zudem kann man noch extra Infos einfügen wie z.B. /blog/ oder die Kategorie z.B. /ubuntu/.

Aus SEO-Sicht ist es nicht empfehlenswert das komplette Datum mit in der URL anzugeben, jedoch kann das Jahr z.B. /2011/ mehr Besucher auf die Webseite / Blog locken, da viele aktuelle Informationen bei Google suchen. Man sollte jedoch auch beachten, dass die Bedeutung der Wörter aus Sicht der Suchmaschine abnimmt um so weiter unten / hinten sich dieses Wort in der URL befindet, daher ist es auch nicht zu Empfehlen das komplette Datum mit in der URL aufzunehmen: Optimale Länge sind 100 Zeichen (max. 200 Zeichen).

Info: Um mehrere Wörter in der URL zu trennen, sollten ausschließlich die Zeichen “/”und “-” und nicht “_” verwendet werden.

11.) Menü & Seitenstruktur

Ein (Haupt-)Menü sollte immer erreichbar sein und kein JavaScript oder Flash enthalten, da Google diese nicht (schlecht) indizieren kann. Zudem sollte man Sackgassen vermeiden, hilfreich sind dabei z.B.: “Kategorien”, “verlinkte Keywords” oder eine Zusätzliche Navigation auf der Webseite “Home > Support > FAQ”

Alle Inhalte, welche man mit 4-6 Klicks von der Startseite erreichen kann, kann auch Google erreichen!

12.) interne Verlinkung

Du solltest Keywords in Texten, welche auf einer Webseite sind, auch untereinander verlinken, so dass der Zusammenhang der einzelnen Texte besser zur Geltung kommt. Die interne Verlinkung kann z.B. auch durch eine “Tag-Cloud” verbessert werden.

13.) Ladegeschwindigkeit

Zum einen berücksichtigt Google die Ladegeschwindigkeit der Webseite als Rankingfaktor und User werden mit Sicherheit mehr Freude an der Webseite haben! ;)

Ich habe bereits vor einiger Zeit einen ausführlichen Blog-Post zu diesem Thema geschrieben -> Webseiten beschleunigen – Übersicht

14.) 404-Fehlerseiten optimieren

Man kann die 404-Fehlerseite auf verschiedene Arten optimieren, zum einen kann man den User mit etwas witzigen ablenken und weiter auf der Webseite halten. | 100 lustige 404 Seiten

Zum anderen könnte man zumindest die Sitemap mit in die 404-Seite einbinden oder alternative Artikel anzeigen. Ich teste gerade das “AskApache Google 404“-Plugin für WordPress, welches mittels Google ähnliche Artikel in die 404-Seite anzeigt.

Info: Zudem sollte man 404-Links im allgemeinen vermeiden / korrigieren. Falls du WordPress einsetzt solltest du dir einmal das Plugin “Broken Link Checker” näher anschauen.

15.) fehlerfreien Quellcode (HTML, XHTML, …)

Zudem sollte der Quellcode der Webseite weitestgehend fehlerfrei sein, da zum einen die Kompatibilität zu verschiedenen Browsern damit verbessert wird und weil Google dies als Kriterium zur Beurteilung der Webseite heranzieht. Hier einige Webseiten, welche dabei helfen den Quellcode zu überprüfen: (W3C)

– CSS

– HTML

– Mobile

– RSS-Feed

16.) kein Blackhat-SEO verwenden

Blackhat-SEO ist dunkle Seite der Suchmaschinenoptimierung, es geht dabei immer darum die Suchmaschinen auszutricksen, was jedoch meistens nach hinten losgeht und seine Abwertung der Webseite zur folge hat. Beispiele:

– versteckte Links

– weißer Text auf weißem Hintergrund

– das Gästebuch-, Foren-, Blog- und Wiki-Spamming durch Einfügen von (irrelevanten) Links

– u.s.w.

17.) kein Intro / Flash- & Java-Anwendungen vermeiden

NIcht nur für die Suchmaschine ist es wichtig die Webseite ohne umwege zu erreichen, auch für die User sind Intros / Ladeanzeigen zu Webseiten mehr als störend. Auch sollte man Flash- & Java-Anwendungen nach möglichkeit vermeiden, da diese ggf. nicht von der Suchmaschiene indexiert werden.

18.) RDFa-Attribute (Rich Snippets) im HTML-Code

Dies ist für kleine Webseiten kaum von Interesse, wenn man jedoch einen Online-Shop oder ähnliches betreibt, sollte man sich mit dem Thema näher beschäftigen.

Info: Rich Snippets & Introducing Rich Snippets

19.) stetige Aktualisierung

Zudem mögen Suchmaschinen neue Inhalte, wie bereits zu beginn geschrieben “Content is King”! Diesen Effekt kann man nutzen, indem man neue Inhalte z.B. via Kommentare generiert, dabei können Kommenare welche nicht zum Thema passen bzw. nicht die nötigen Keywords beinhalte ggf. auch negative Effekte haben, daher kann man Kommentare auch auf anderen Seiten auslagern z.B. mit Disqus.

Man kann z.B. auch neue Inhalte via Facebook & Twitter auf die Webseite bringen (siehe Twitter-Meldungen auf der rechten Seite) indem man Inhalte importiert oder man aktualisiert von Zeit zu Zeit einige Beiträge! ;)

20.) Usability & Optik

Im Allgemeinen geht es darum, die Benutzerfreundlichkeit (Usability) & das Design auf einer Webseite zu vereinen, so dass sich User besser auf der Webseite zurechtfinden und dies mit Backlinks belohnen.

21.) Seriosität & Glaubwürdigkeit

Auch hier steht in erster Linie der User und nicht die Suchmaschine im Vordergrund. Jedoch ist die Glaubwürdigkeit, dass man weiß wovon man schreibt und ein seriöser Auftritt der Webseite auch ein wichtiger Faktor! Stimmt das Konzep der Webseite nicht, so hilft auch die beste SEO-Optimierung nichts.

Offpage-Faktoren: (nimmt Einfluss auf die jeweilige Webseite, ohne auf dieser etwas zu ändern)

1.) Backlinks (Linkaufbau)

2.) “double Content” (extern)

3.) (Google) Webmaster-Tools

4.) (online) SEO-Software

5.) bezahlte Werbeeinblendungen (Grafikbanner, Textanzeigen …)

6.) Social-Media: Sichtbarkeit in sozialen Netzwerken und Plattformen

7.) Webkataloge

1.) Backlinks

Wie bereits zu Beginn beschrieben, bewerten Google eingehende Links, sogenannte Backlinks positiv für deine Webseite. Hier nun einige Beispiele wie man den Linkaufbau vorantreiben kann.

– gute Inhalte, Gewinnspiele oder ähnliches was den Nutzer interessiert

und somit weiterempfohlen und mit Backlinks belohnt wird :)

– Signaturen mit Link in Foren

– Kommentare mit Link in Blogs

– RSS-Feed anbieten / Blogroll erstellen

– Beiträge im Sozial-Network verlinken (Twitter, Facebook, Google+)

– …

2.) “double Content” (extern)

Doppelte Inhalte sind nicht nur ein internes Problem auf der Webseite selbst, wenn deine Beiträge von anderen übernommen (geklaut) werden und Google den selben Inhalt mehrmals im Internet findet, ist dieser einerseits weniger Wert und wird daher

3.) Google Webmaster Tools

Mit Hilfe der Google Webmaster Tools kann man selber prüfen, wie gut oder schlecht man von Google erfasst wird und ggf. bereits Rückschlüsse aus Änderungen ziehen.
Zum Beispiel kann man feststellen, ob Google beim indexieren (crawlen) der Website auf Fehler gestoßen ist, Sitemanps angeben oder prüfen mit welchen Suchbegriffen die Webseite bereits gefunden wurde…

1.) Google-Konto erstellen
2.) Google Webmaster Tools

Tipp: andere Suchmaschinen haben ebenfalls “Webmaster Tools” > z.B. Bing Webmaster Tools

4.) (online) SEO-Software

Es gibt sehr sehr viel SEO-Software, jedoch sollte man sich für den Anfang auf die bereits erwähnten “Webmaster-Tools” der Suchmaschinen konzentrieren! Wer zudem noch die Ranking-Positionen analysieren und überwachen möchte oder seine Webseite automatisch bei verschiedenen Suchmaschinen anmelden möchte, findet dafür auch kostenlose & kostenpflichtige Software.

z.B.:

– kostenpflichtig: Hello Engines!

– kostenloses (online): rapid.searchmetrics.com

…

5.) bezahlte Werbeeinblendungen (Grafikbanner, Textanzeigen …)

Natürlich kann man auch Traffic (Besucherzahlen) durch Werbung generieren. Dabei sollte man jedoch beachten, dass die Besucher nur wiederkommen, wenn auch einen Mehrwert bietet!

z.B.:

– Google AdWords

– Facebook Advertising

…

6.) Social-Media: Sichtbarkeit in sozialen Netzwerken und Plattformen

Social-Media ist ein Sammelbegriff für Facebook, Twitter, YouTube, Social-Bookmarking-Dienste etc. und ist so umfassend, dass ich dafür bereits ein eigenen Blog-Post geschrieben habe: Das Soziale-Netz und die digitale Zukunft

7.) Webkataloge

Ggf. kann man sich www.dmoz.org einmal anschauen, jedoch sind Webkataloge (Link-Sammlungen) in der heutigen Zeit weniger von Bedeutung!

Was ist jQuery?

JavaScript mit & ohne jQuery!

jQuery-Selektoren

jQuery-Beispiel

Ähnliche Beiträge:

Vorwort:

Onpage-Faktoren: (auf der jeweiligen Webseite)

3.) Keywords

4.) (Meta-)Tags

content

Beschreibung

5.) (Google) Sitemap

6.) Bilder

7.) Domainwahl

8.) “double Content” (intern)

9.) korrekte Weiterleitungen (Redirects)

10.) die Struktur der URL

11.) Menü & Seitenstruktur

12.) interne Verlinkung

13.) Ladegeschwindigkeit

14.) 404-Fehlerseiten optimieren

15.) fehlerfreien Quellcode (HTML, XHTML, …)

16.) kein Blackhat-SEO verwenden

17.) kein Intro / Flash- & Java-Anwendungen vermeiden

18.) RDFa-Attribute (Rich Snippets) im HTML-Code

19.) stetige Aktualisierung

20.) Usability & Optik

21.) Seriosität & Glaubwürdigkeit

Offpage-Faktoren: (nimmt Einfluss auf die jeweilige Webseite, ohne auf dieser etwas zu ändern)

1.) Backlinks

2.) “double Content” (extern)

3.) Google Webmaster Tools

4.) (online) SEO-Software

5.) bezahlte Werbeeinblendungen (Grafikbanner, Textanzeigen …)

6.) Social-Media: Sichtbarkeit in sozialen Netzwerken und Plattformen

7.) Webkataloge

Ähnliche Beiträge: