3 kostenlose SEO Tipps um das Ranking deutlich zu steigern!

3 kostenlose SEO Tipps um das Ranking deutlich zu steigern!

Um eure Website besser im Netz finden zu können gibt es einige gute Techniken, welche ich euch hier zeige.

Das Wichtigste um die Homepage nach oben zu bringen, ist ein sauberer Code, viel guter Content / Text aber auch die Keyword-Dichte, Überschriften, Strong-Tags, H1-H3 usw. sind wichtige Faktoren. Ich benutze in diesem Video ausschließlich kostenfreie Tools, diese könnt ihr ohne Anmeldung oder Registrierung kostenlos nutzen.
Seobility
Als erstes im Video gehe ich auf Seobilty ein, dieses Tool ist sehr übersichtlich. Ihr tragt einfach in der Leiste eure Domain ein und geht auf Webseite analysieren. Es dauert nun einige Sekunden und ihr erhaltet eine ausführliche, technische Auswertung der Seite. Am Wichtigsten sind die direkt oben genannten “To-do Liste mit SEO Optimierungen”. Mit jedem Punkt, welchen ihr hier ausbessert, wird euer SEO-Wert ein wenig besser werden. Genauso wie die ganze Website, lassen sich dann auch die Inhalte auf einzelne Keywords prüfen. Geht einfach unten in der Auswertung auf “Wichtigste Suchbegriffe” und dort könnt ihr auf den blauen Check-Knopf drücken und erhaltet wichtige Infos zu den einzelnen Suchbegriffen. Natürlich könnt ihr in die Maske auch andere Begriffe eintragen und ihr seht, wie man diese optimieren kann. Fragt mich gerne, wenn ihr hier Hilfe braucht!
Hier die Links zu Seobilty:
https://www.seobility.net/de/seocheck/ https://www.seobility.net/de/keywordcheck/
rankingcheck
Als nächstes die Keyword-Datenbank von rankningcheck, diese kann man benutzen, um neue Keywords zu finden, den Marktwert und Konkurrenz für die Begriffe zu prüfen und auszuwerten. Diese kann man alternativ zu der Datenbank von AdWords nutzen, um die eigene Strategie besser auszuarbeiten.
Hier der Link zur Datenbank:
https://www.more-fire.com/tools/keyword-datenbank/ Ich hoffe, mein Video, die Links und die grobe Anleitung haben euch gefallen und bringen euch weiter bei eurem Projekt und ein paar Plätze weiter nach oben bei Google. 🙂 Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist. Viele Grüße aus Hamburg Karsten

Relative Werte, responsive Programmierung

Relative Werte, responsive Programmierung

Relative Werte, einfacher Weg zur responsiven Website

Um für alle Anzeigegeräte zu programmieren, ist diese Technik eine gute und wichtige Grundlage.
Funktionsweise
Relative Werte werden in die CSS-Datei eingegeben und alternativ zu den fixen Werten, zum Beispiel 10 Pixel, verwenden wir Werte, die sich nach der Anzeige richten und keine feste Größe besitzen. Folgende Werte kann man hier als Beispiel verwenden und spart sich dadurch erheblich viel Code, zu der Variante mit px: vw = Viewportwidth, vh = Viewportheight, em = Schriftgröße, % = Prozent
Den in meinem Video verwendeten Code könnt ihr hier kopieren und es selbst probieren:
Hier der Code aus der HTML-Datei:
<!DOCTYPE html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <link rel=”stylesheet” href=”relative-werte.css”> </head> <body> <header> </header> <main> <div class=”beispiel1″> </div> <h1>Beispiel für relative Werte</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <div class=”beispiel2″> </div> <img class=”relativeimg” src=”relative-werte.jpg” alt=”Lrelative Werte” title=”relative Werte Image”> <div class=”beispiel3″> </div> </main> <footer > </footer> </body> </html>  
Hier der Code aus der CSS:
/*RESET*/ *{ margin: 0; padding: 0; box-sizing: border-box; } .beispiel1{ height: 2em; /*für relative Breite % Angabe verwenden*/ width: 60%; margin-left: 20%; margin-top: 2vh; /*höhe des Viewport*/ margin-bottom: 4vh; /*höhe des Viewport*/ background-color: green; } .beispiel2{ height: 1em; width: 100%; background-color: blue; } .beispiel3{ height: 20em; width: 80%; margin-left: 10%; background-color: red; } .relativeimg{ width: 50%; /* alternativ zum Bsp. width: 50vw; vw = viewport-Breite*/ } /*für relative Größe in Schriften vw Angabe verwenden*/ h1{ font-size:5vw; } p{ font-size:3vw; }
Alternativ findet ihr den Code zum Video unter:
HTML5:
https://gist.github.com/kb-media/ba64…
CSS3
https://gist.github.com/kb-media/414d… Mehr Angaben zu fixen Werten und relativen Werten findet ihr hier: https://wiki.selfhtml.org/wiki/CSS/We… Ich hoffe, mein Video, die Links und die grobe Anleitung haben euch gefallen und bringen euch weiter bei eurem Projekt. ???? Ein weiteres wichtiges Thema werde ich demnächst auch noch aufgreifen und das sind die Breakpoints. Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist. Viele Grüße aus Hamburg Karsten