Unser Blog

Lesen Sie was uns bewegt in der Welt des Online Marketings.
Schreiben Sie uns Ihre Meinung in einem Kommentar.
Unser Blog

01. Juni 2017

jQuery vs. Angular - Unterschiede und Gemeinsamkeiten

01. Juni 2017
Wer sich in der Vergangenheit bereits mit JavaScript auseinandergesetzt hat, hat es vermutlich mitbekommen: Es gibt immer mehr und mehr JavaScript-Frameworks und Libraries. Zwei beliebte Frameworks sind dabei jQuery und AngularJS (bzw. neuerdings nur noch Angular). Doch warum ist das eigentlich so? In diesem Artikel möchten wir diese beiden Frameworks einmal miteinander vergleichen und der Frage nachgehen, warum beide ihre Daseinsberechtigung haben.

Fangen wir mit jQuery an: Genau genommen ist jQuery gar kein JavaScript-Framework, sondern eine JavaScript-Library. Eine gute Definition für den Unterschied zwischen Framework und Library ist dabei die folgende: Eine Library (oder auch Bilbiothek) wird in den eigenen Code integriert, in einem Framework dagegen, integriert man seinen eigenen Code. Hier ist auch schon der erste Vorteil von jQuery zu finden: Die Einbindung ist sehr einfach. An sich braucht man nur eine JavaScript-Datei herunterladen und via <script>-Tag in seine Webseite oder Webapplikation einbinden. Fertig.
Bei Angular dagegen sieht es etwas anders aus. Angular ist tatsächlich ein Framework und so muss man es zunächst einrichten bevor man mit seinem eigenen Code so richtig loslegen kann. Es wird also zunächst der Rahmen für die Webanwendung auf Basis von Angular geschaffen. Dabei helfen sog. Package-Manager und Building-Tools. Package-Manager sind hier dafür zuständig, verschiedene Libraries und Frameworks aus einem zentralen Repository zu laden und dabei auch die Abhängigkeiten zwischen verschiedenen Libraries und deren Versionen zu prüfen (auch praktisch für Updates). Sehr beliebt im Bereich JavaScript ist hier z.B. npm von Node (alternativ gibt es z.B. noch Bower). Die Building-Tools sind danach für das „zusammenbauen“ verantwortlich. Das hat den Vorteil, dass man eine Struktur mit verschiedenen JavaScript-Dateien erstellen kann und diese dann am Ende vom Building-Tool zusammengefügt werden zu einem kompakten Script. Dabei können auch gleich Optimierungen vorgenommen werden, z.B. Minifying oder Preprocessoren (Angular verwendet seit Version 2 standardmässig TypeScript). Solche Building-Tools sind u.a. Gulp, Grunt oder für Angular 2 und höher auch Angular-CLI. Unter dem Strich braucht man für ein Angular-Projekt also einen Package-Manager (npm), ein Building-Tool (Angular-CLI) und etwas Zeit.

So viel also zur Einrichtung beider Frameworks (Wir verwenden jetzt mal der Einfachheit halber diesen Begriff für beide). So gesehen ist der Start mit jQuery deutlich einfacher gestaltet, warum also dann so etwas komplexes wie Angular einsetzen? Zugegeben, die Einrichtung ist gerade für Anfänger ziemlich kompliziert, aber es zahlt sich am Ende aus. Denn dank Preprocessoren und Building-Tools kann man mit Angular deutlich strukturierter arbeiten. So lassen sich z.B. bekannte Strukturen aus dem Bereich von MVC-Frameworks übernehmen, mit Files für Controller, Models etc. Angular ist übrigens ein sog. MVVM-Framework, eine Abwandlung von MVC. Nebenbei sorgt TypeScript für eine schöne Code-Struktur, denn TypeScript erlaubt Typen und Klassen in JavaScript. Zusammengefasst bedeutet das: Bei jQuery haben wir am Ende ggf. nur eine Script-File oder müssen sehr genau darauf achten, in welcher Reihenfolge wir die Script-Files laden. Ggf. müssen wir hier auch selber auf Abhängigkeiten zu anderen jQuery-Plugins achten. Es droht Spaghetti-Code! Bei Angular ist der Code – vorausgesetzt man programmiert sauber – besser strukturiert, unterteilt in Models, Views, Controller und mehr. In der Ausgabe sieht man das übrigens nicht, hier kommt dank den entsprechenden Building-Tools eine grosse unleserliche JavaScript-File heraus, aber der Browser weiss schon etwas damit anzufangen.

Nun zur Handhabung: jQuery ist an sich relativ simpel zu handhaben. Nicht nur in der Einrichtung, sondern auch in der Nutzung. Es gibt irgendein DOM-Element, welches es zu manipulieren gilt. Dieses kann man dank jQuery-Selektoren sehr einfach ansprechen, z.B. über die Klasse oder die ID des Objektes. Danach lassen sich viele nette Dinge machen: Einblenden, Ausblenden, Events (z.B. onClick) und und und… Doch jetzt kommt der Haken: Das alles funktioniert im reinen JavaScript. Geht das etwa anders? Ja, das tut es! Nämlich mit Angular dank des magischen Wortes „Two-Way-Databinding“. Denn hier kann man bereits direkt im HTML dafür sorgen, dass Werte manipuliert werden. Ein ganz einfaches Beispiel: Ich habe einen <span>, darin steht eine Zahl, diese soll hochgezählt werden, wenn ich auf einen Button klicke. Bei jQuery müsste ich nun im JavaScript ein Event auf den Button legen, welcher dann den Wert im <span> ausliest, 1 addiert und den Wert im <span> neu setzt. Alles über das Script. Bei Angular gebe ich einfach eine Variable direkt im HTML als Model an, in etwa so: ng-model=“count“. Nun steht mir im JavaScript diese Variable „count“ zur Verfügung und ich kann sie direkt manipulieren. Ich kann auch auf den Button direkt im HTML das entsprechende Event legen, z.B. so ng-click=“countUp()“. Im JavaScript brauche ich also nur eine Methode countUp() einrichten, die count hochzählt, fertig. Das ganze funktioniert dabei in zwei Richtungen, wenn ich „count“ im HTML manipuliere, ändert es sich im JavaScript, manipuliere ich „count“ im JavaScript, so ändert es sich direkt im HTML. Sehr schön gegenüber gestellt, wird dies auch in diesem etwas älteren Tutorial-Video von AngularJS

Kommen wir zur wichtigsten Frage: Wann setze ich auf Angular und wann setze ich auf jQuery? Die Frage lässt sich nicht so einfach beantworten. Über den Daumen würde ich bei kleineren Projekten bzw. Projekte, die ohne viel JavaScript (auch ohne viele Ajax-Requests etc.) auskommen und eher andere Dinge im Fokus stehen, auf jQuery setzen. Bei grossen JavaScript-Projekten, also Projekte, wo JavaScript im Mittelpunkt steht, da könnte sich Angular besser eignen. Übrigens gehört Angular zu den sog. Single-Page-Application-Frameworks (kurz SPA). Hier wird alles über nur eine Seite dargestellt. Die Darstellung verschiedener Inhalte erfolgt dann über ein- und ausblenden im Browser kombiniert mit Routen. Aber technisch ist es unter dem Strich nur eine Seite im Browser. Das bedeutet Angular ist u.a. geeignet, wenn man z.B. Wizards gestaltet, in denen man von einem Formular zum nächsten springt, und dabei Formulare ein- und ausblendet oder wenn man asynchron mit einem Backend kommuniziert (z.B. über eine REST-API) und entsprechend asynchron Inhalte anzeigt und ausblendet. Ein gutes Beispiel für jQuery dagegen sind z.B. Filter auf einer Webseite. Man hat eine Webseite mit verschiedenen Unterseiten und allem was dazu gehört und eine Seite davon hat eine Liste von Daten. Diese Liste will man nun bequem im Browser filtern. Dafür eignet sich jQuery hervorragend, es wird ein eigenes Script eingebunden, dieses liest die Inhalte via jQuery ein, filtert diese und manipuliert entsprechend die Ausgabe. Alles über eine Script-File. Sobald man aber die Filter mit anderen Operationen koppeln muss, z.B. mit Ajax-Requests, kann es dagegen wieder sehr kompliziert werden.

Zusammengefasst sehen wir, beide Frameworks haben ihre Daseinsberechtigung. jQuery ist etwas leichter im Einstieg und der Handhabung für kleinere Operationen. Sobald es komplex wird, gestaltet es sich mit jQuery deutlich schwieriger. Angular dagegen hat seine Tücken im Einstieg, auch die Lernkurve ist relativ steil. Doch für komplexe Operationen bzw. Seiten, die zu fast 100% auf JavaScript setzen, ist Angular vermutlich die bessere Wahl.


26. April 2017

Das neue "CSS-Grid" steht in den Startlöchern und tritt mit Bootstrap und Flexbox in Konkurrenz [Teil 1]

26. April 2017

Bootstrap und Flexbox segnen das Zeitliche. Der Startschuss für das neue CSS-Grid-Layout ist gefallen und bringt einen denkbar einfachen Lösungsansatz in die Welt von HTML5 und CSS3. Einziger Wermutstropfen, aktuell funktioniert es nur in Browsern die ab März 17 aktualisiert wurden.

In den letzten Jahren hat sich bei CSS viel getan. Möchte man eine Webseite stylen, kommt man an den Cascading Style Sheets nicht vorbei. Schon mit der dritten Version (CSS3) kamen viele Neuerungen hinzu, die man heute nicht mehr missen möchte. Gerade druch Responsive Webdesign hat sich viel bewegt und die Möglichkeiten sind heute nahezu grenzenlos. So ist es beispielsweise möglich über die so genannten Media Queries in einem und dem selben CSS-File Darstellungszustände für unterschiedliche Browserauflösungen und Grössen zu setzen.

Frameworks wie beispielsweise Bootstrap und Flexbox erlangten grosse Aufmerksamkeit und Nutzerzahlen und waren über eine lange Zeit hinweg die perfekte Alternative zu Tabellen, wenn es darum ging, Spalten zu erstellen. Allerdings mussten hier mehrere Ebenen von Containern für die Spaltenstruktur verschachtelt werden und blähte so das HTML-Markup unnötig auf.

Das neue Gridsystem ist hier nun komfortabler und das Verschachteln von Containern segnet somit bald das Zeitliche. Mit dem neuen System ist es ausserdem möglich, Spalten bzw. Container zu verschieben, ohne damit dem HTML-Markup zu schaden oder ändern zu müssen. Dazu ein Beispiel:


Dreispaltiges Layout mit dem CSS Grid System

Wir erstellen in unserem HTML-File drei Container. Diese sehen wie folgt aus:

See the Pen EmZbdx by Tom Jähne (@failormooNN) on CodePen.

Nun fügen wir das neue CSS-Grid-System ein, das wie folgt aussieht:

See the Pen zwNPXx by Tom Jähne (@failormooNN) on CodePen.

Das übergeordnete Element, bei uns der Body, bekommt die Variable display:grid;.
So geben wir dem Body zu verstehen, dass sich in diesem Element Grid-Elemente befinden können/werden.
Als nächstes werden die grid-template-areas festgelegt. Wie dieses Areas heissen, kann jeder selbst entscheiden. Für eine veranfachte Darstellung habe ich hier einmal "a b c" genommen. Diese Darstellung zeigt nun, dass unsere 3 Elemente nebeneinander stehen sollen.

Damit nun unsere Spalten auch als "a b c" erkannt werden, müssen wir dies ebenfalls in unserem CSS-File über die grid-area festlegen. Das sieht dann wie folgt aus:

See the Pen gWgXEX by Tom Jähne (@failormooNN) on CodePen.

Rufen wir unser HTML-File nun in unserem Browser auf, ist zu sehen, dass wir drei gleich breite Spalten nebeneinander angeordnet haben. Um nun die Reihenfolge der Spalten zu ändern, genügt es die Reihenfolge der grid-areas in den grid-template-areas zu ändern.

Beispielsweise so:

See the Pen BRpmex by Tom Jähne (@failormooNN) on CodePen.


Nun haben wir unser erstes, sehr simples, Grid-Layout mit dem neuen CSS-Grid erstellt.

Im kommenden zweiten Teil, werde ich näher auf die Syntax und weitere Möglichkeiten
des neuen CSS-Grid-Systems eingehen.

Mehr zu diesem Grid-System und der Syntax findet Ihr auf:

Mozilla Developer Network


19. Mai 2017

SEO Teil 4/5: Keywords finden und analysieren

19. Mai 2017

In diesem vierten Teil der SEO-Blogserie geht es um Keywords. Wenn du zuerst mehr über SEO im Allgemeinen, OnPage-Massnahmen oder OffPage-Massnahmen erfahren möchtest, klicke auf den entsprechenden Link.

Keywords sind in aller Munde. Doch was sind diese Schlagwörter und wo macht es überhaupt Sinn zu optimieren. In der folgenden Einführung einen groben Überblick:


1. Long-Tail-Keywords

Damit deine Seite bei Google und Co. Möglichst weit oben erscheint, ist es sinnvoll den Weg des geringsten Widerstandes zu gehen. Aus diesem Grund schauen wir uns das „Long-Tail“-Konzept an.
Intuitiv macht es Sinn auf häufig benutzte Keywords zu setzen. Meistens wird dies aber vor allem mit Frustration und verschwendeten Ressourcen enden. Denn der damit generierte Traffic wird wahrscheinlich auch von geringer Qualität sein.

longtail keywords reseach artd
Dieses besagt, dass es sinnvoller ist auf Nischen-Keywords zu setzen, da diese mengenmässig auch stark vertreten sind und vor allem die Traffic-Qualität dabei um einiges höher ist.

Als Beispiel dient uns ein Schuhgeschäft: Es macht wenig Sinn „Schuh Shop“ zu optimieren. Anstattdessen sollten mehrere Unterseiten auf einen spezifischen Schuhtyp oder eine Schumarke optimiert werden. Wenn ein User nach einem spezifischen Schuhtyp sucht, ist er im Entscheidungs- und Kaufprozess bereits viel weiter fortgeschritten als jemand der nach “Schuh Shop“ sucht. Das bedeutet auch, dass diese Nutzer viel eher dazu bereit sind Geld auf deiner Seite auszugeben.

Wenn dein Geschäft/Service zudem lokal beschränkt ist, können die Regionen oder Länder auch als Keywords gelten. Keyword-Kombinationen mit dem Ort bringen bereits ein kaufbereiteres Publikum.


2. Keywords identifizieren

Für das Identifizieren von Keywords gibt es ein paar einfache Tools.

Die Google Search Console ist ein solches Tool. Damit lässt sich analysieren, anhand welcher Keywords die Besucher auf die Seite gelangten. Diese Daten können eine sehr wichtige Datenquelle sein. Es bleibt aber auch immer zu berücksichtigen, dass diese Daten auf dem Status Quo basieren. Potential, das noch gar nicht genutzt wird, wird also auch mit diesem Tool nicht erkannt.

Trotzdem sind diese Daten wichtig, weil der Fortschritt bei der Suchmaschinenoptimierung (SEO) auch gemessen werden kann und soll. Es ist spannend zu sehen, welche Keywords sich wie auswirken. Zudem ist die Google Search Console kostenlos.


3. Keyword Recherche

Neben den bestehenden sind auch neue Keywords sehr wichtig. Dabei gilt es, sich Gedanken zu machen, was man eigentlich anbietet, was seine USP sind etc. Gewisse Tools können hier einem etwas unter die Armen greifen. Google’s Keyword Planner ist ein freies Tool, welches eigentlich dazu designt wurde, um Werbern die richtigen Keywords zu offerieren. Für die Keywords-Recherche beim SEO taugt es aber perfekt. In diesem Tool kann man z.B. auch Keywords von Mitbewerbern betrachten und von diesen die eigenen ableiten.

Natürlich kann man auch die Suchmaschine selbst als Informationsquelle brauchen. Hat man bereits verschiedene Keywords im Kopf, lohnt es sich diese einmal bei Google einzugeben. Wenn die Konkurrenz dort riesig ist und Hunderttausende oder Millionen von Suchresultaten erscheinen, lohnt sich der Aufwand für die Optimierung vermutlich nicht.

keyword research webdesig example
Ein weiterer Trick bei Google ist folgender: Gib ein wichtiges Keyword ein und schau was Google im Dropdown vorschlägt. Diese Kombinationen werden oft zusammen gesucht und ermöglichen das Erreichen einer kleineren und kaufwilligeren Benutzergruppe. Ähnliche Vorschläge erscheinen auch auf der ersten Resultatenseite ganz unten.

Beim letzten Teil dieser SEO-Blogserie wird es um die Analyse der SEO und das Tracking des Erfolges gehen. Schau wieder vorbei und bleib auf dem Laufenden.

Ich will mehr darüber erfahren!


18. April 2017

SEO Teil 3/5: Off-Page Massnahmen

18. April 2017

Nachdem in den ersten beiden Blogbeiträgen dieser Serie die Grundlagen und die On-Page-Massnahmen behandelt wurden, geht es in diesem Teil um die Off-Page-Massnahmen der Suchmaschinenoptimierung.

Bei Off-Page SEO handelt es sich um Massnahmen der Suchmaschinenoptimierung, die NICHT auf der eigenen Webseite vorgenommen werden können.  Dabei gibt es verschiedene Möglichkeiten, die darauf abzielen deine Webseite bekannter zu machen.  Im Allgemeinen geht es darum, auf anderen Seiten verlinkt zu werden. Diese Links werden Backlinks genannt und sind wichtig fürs Ranking. Das gilt aber nur unter gewissen Voraussetzungen, denn die Quantität der Backlinks alleine ist kein Kriterium (mehr). Heute ist für die Suchmaschinen die Qualität der Links viel stärker gewichtet. So wurden z.B. der thematische Kontext, die Platzierung oder der Ankertext ausschlaggebender und entsprechend wurde z.B. das Kaufen von (heute nutzlosen) Backlinks unterbunden.

Die folgende Einführung zeigt Schritte für deine Seite, damit mehr externe und QUALITATIVE Links auf deine Seite zeigen und deine Seite bekannter wird:

1.    Social Media

Die sozialen Medien spielen eine enorm grosse Rolle im Internet und die Nutzerzahlen steigen immer noch. Zu den wichtigsten zählen zumindest im europäischen und amerikanischen Markt Facebook, Twitter, Tumblr, Instagram, Snapchat und Pinterest. Dazu kommen noch XING und LinkedIn, welche als soziale Medien für Geschäftszwecke gelten.

Werden Links über diese Kanäle geteilt, nimmt nicht nur dein Umfeld das wahr. Auch Google registriert diesen Traffic und solche „sozialen Signale“ können direkten Einfluss auf das Ranking haben.

Damit auch Links deiner Seite in den sozialen Medien landen, sollte es den Nutzern deiner Seite einfach gemacht werden Inhalte zu teilen. Beispielsweise Button, um eine Seite auf den sozialen Medien teilen zu können, ist Pflicht.

Des weiteren ist es auch wichtig, dass der Inhalt auf den sozialen Medien aktuell gehalten wird und regelmässig neue Beiträge dazukommen.

2.    E-Mails

In den letzten Jahren ist das Verwalten von Kundendaten und deren Nutzung im Dienste von Newslettern etc. immer einfacher geworden und hat sich so verbreitet.

Je verbreiteter die Mails zu Werbezwecken wurden, desto wichtiger wurde das Beschränken auf nützliche Mails. Es gilt dem Kunden eine Call-to-Action anzubieten und klare Statistiken über deren Verhalten zu führen. Denn nur zufriedene Leser teilen auch deine Artikel, was wiederum zu mehr Präsenz verhilft.


3.    Gastartikel

Gastartikel, also von dir verfasste Beiträge auf anderen Seiten, sind eine wunderbare Möglichkeit um hochstehenden Inhalt mit wertvollen Links ausserhalb deiner Seite platzieren zu können. Halte am Besten Ausschau nach Kanälen, die thematisch zu dir passen. Solche Artikel generieren nicht nur tolle Backlinks, sondern zeigen auch deinen Expertenstatus im jeweiligen Bereich.


4.    Blog

Schon seit vielen Jahren gibt es nun bereits Blogs und viele Firmen haben einen eigenen Blog, in dem sie Neuigkeiten über das Unternehmen oder den Tätigkeitsbereich veröffentlichen können. Das generiert qualitativen Inhalt zu spezifischen Themen, was auch viele Keywords liefert. Es zeigt auch den Kunden, wie du arbeitest oder wo deine Schwerpunkte liegen. Zudem lassen sich auch diese Artikel wunderbar in den sozialen Medien teilen.

Im nächsten Blogbeitrag werden wir die Bedeutung und Nutzung von Keywords anschauen. Schau wieder vorbei und bleib auf dem Laufenden.



02. Februar 2017

SEO Teil 2/5: On-Page Massnahmen

02. Februar 2017

In diesem Teil werden die On-Page-Massnahmen erläutert und diskutiert. Der erste Teil dieser Einführung behandelt die Grundlagen von SEO und kann hier nachgelesen werden.

Bei On-Page SEO handelt es sich um Massnahmen der Suchmaschinenoptimierung, die auf der eigenen Seite vorgenommen werden können. Hier gibt es einige Möglichkeiten um die Suchmaschinen auf deine Seite aufmerksam zu machen oder diese besser verständlich zu präsentieren. Mit folgenden 8 Verbesserungen ist eine bessere Platzierung in den Resultaten garantiert!


1. Robots.txt

Damit deine Seite überhaupt bei Suchmaschinen erscheint, muss diese indexierbar sein.

Im Stammverzeichnis deiner Website befindet sich normalerweise eine Datei „robots.txt“, welche den Bots Instruktionen zur Indexierung gibt. Darin wird festgelegt, welche Teile deiner Website indexiert werden sollen und welche nicht. Diese Datei wird als Erstes von den Bots aufgerufen und bildet die Basis für die Indexierung.

Eine Robots.txt sieht in der Regel etwa so aus:

User-agent:*   (alle Bots)
Disallow: /administrator
Disallow: /zahlungen

Mit dem Wort „Disallow“ untersagt man den Zugriff auf die nachfolgenden Dateien oder Ordner. Es sollten aber grundsätzlich alle Bereiche zugänglich sein, welche die Darstellung der Seite beeinflussen. Des Weiteren wird auch häufig die Sitemap in der Robots.txt vermerkt. Diese dient dem Bot als Referenz für alle benutzten URLs.


2. SEF URLs = Search engine friendly URLs

Eine gute Struktur der URLs kann den Inhalt bzw. den Aufbau deiner Seite viel klarer machen. Man nennt das auch „sprechende URLs“ und dabei sind folgende Tips wichtig:

  • User sollen bereits anhand der URL wissen, was sie auf der Seite erwartet.
  • Überflüssige Unterordner-Level sind zu vermeiden. Keep it simple.
  • Keine Spezialzeichen, welche das crawlen erschweren


3. Bilder

Bilder sind einer der wichtigsten Bestandteile einer Webseite. Sie helfen, dass sich der Nutzer nicht langweilt, die Seite schön aussieht und um Informationen zu übermitteln. Suchmaschinen nehmen die Bilder aber auch auf eine andere Art wahr, nämlich wie sie in die Seite integriert sind. Dabei ist es wichtig, dass Bilder sinnvolle Titel haben und ein Alt-Tag benutzt wird, welches benutzt wird, wenn das Bild nicht geladen werden kann. Es macht also Sinn dein Bild z.B. „Rote-sportliche-Tennisschuhe-Frauen-Marke.jpg “ anstatt „DSC_645.jpg“ zu nennen.


4. Titel, Meta und Headline Tags

Die „Title Tags“ sind die Titel, die oben in einem Tab deines Webbrowsers angezeigt werden. Diese Titel werden bei Suchmaschinen-Resultaten auch angezeigt. Deshalb ist es wichtig, dass sie sich auf den Inhalt der jeweiligen Seite beziehen. Dabei gilt es folgende Tipps zu beachten:

  • die wichtigsten Keywords benutzen
  • Maximumlänge nicht überschreiten (55-75 Zeichen)
  • Markenname oder Firmenname auch im Titel Tag einbauen
  • Einzigartiger Titel-tag pro Seite

Das Meta-Tag beinhaltet Schlüsselwörter und die Beschreibung der jeweiligen Seite und befindet sich in den Resultaten unterhalb des Titels. Wenn keine Beschreibung vorhanden ist, greift der Bot auf einen Ausschnitt des Textes deiner Seite. Optimalerweise dient diese Beschreibung in den Resultaten als Call-to-Action.

Bei den Headline-Tags ist es wichtig immer die semantisch korrekte Reihenfolge zu nutzen (nur ein H1-Tag nutzen, H2 vor H3 etc.). Im Allgemeinen dienen diese dem Nutzer und der Bot zur Orientierung und dem Verständnis der Struktur deiner Seite.


5. Interne Links

Es sind nicht nur die Links wichtig, die auf deine Seite zeigen, sondern auch diese innerhalb deiner Seite. Wenn du auf deiner Seite also zum Beispiel einen Blog schreibst, solltest du dort wichtige Dinge innerhalb deiner Seite verlinken. Aber weshalb? Weil du damit dem Bot mehr Informationen darüber gibst, um was es auf deiner Seite geht. Es entsteht um die Seite einen Kontext, welchen du mittels Ankertexten mitgestalten kannst.


6. Performance

Für Suchmaschinen und für die Nutzer ist eine langsam ladende Seite unbefriedigend. Es ist also wichtig, dass die Seitengrösse kompakt bleibt. Dabei spielen Bilder eine wichtige Rolle und sollten deshalb so gut es geht komprimiert werden. Des weiteren sind CSS und Javascripts so zu verkleinern und zusammenzuführen, dass weniger und kleinere Dateien geladen werden müssen.


7. Mobile Optimierung

Gerade auf mobilen Geräten ist die Ladezeit sehr wichtig. Es gilt aber auch das Layout so aufzubauen oder abzuändern, dass es in der mobilen Ansicht auch gut aussieht und vor allem einfach bedienbar bleibt. Beachte zum Beispiel, dass Buttons nicht zu nah beieinander liegen und so auf dem Touchscreen eine Herausforderung werden. Seit April 2015 ist die „mobile friendliness“ ein Rankingfaktor.


8. Duplizierter Inhalt / Canonical Tags

Die Suchmaschinen möchten aussagekräftige Seiten und nicht duplizierter Inhalt auf jeder Seite. So weit so gut. Es ist aber gut möglich, dass man eine Seite auf verschiedene Arten aufrufen kann: Die Tennisschuhe sind unter beispiel.ch/damen/schuhe/sport/rot/ aufrufbar oder unter beispiel.ch/damen/aktionen/2017/januar/. Es ist wichtig, dass man der Suchmaschine mitteilt, dass es sich um dieselbe Seite handelt. Dafür werden sogenannte Canonical Tags verwendet. Dies ist ein Link, der im Head jeder Seite platziert wird und auf die Hauptversion der Seite verweist. Der Bot ruft dann all die URLs der gleichen Seite auf und sieht, dass es sich absichtlich um die gleiche Seite handelt. Das sorgt für bessere Resultate dieser einen Seite und der Website insgesamt.

Diese Liste ist nicht abschliessend, aber beinhaltet die wichtigsten Verbesserungen, die du auf deiner Seite vornehmen kannst. Andere Verbesserungen, wie zum Beispiel korrekte Weiterleitungen oder Verschlüsselungen (https), können auch sehr sinnvoll sein und müssten anhand eines SEO Audits überprüft werden. Im nächsten Blog Beitrag geht es um die Massnahmen, die du auf anderen Seiten vornehmen kannst, damit deine Seite weiter oben erscheint.

Stay Tuned!

Wenn du deine Seite analysieren lassen möchtest, nimm mit uns Kontakt auf und wir machen dir kostenlos einen ersten Check!




25. Januar 2017

SEO Teil 1/5: Eine Übersicht

25. Januar 2017

Was ist SEO? Für was wird das gebraucht und was nützt das Ihnen konkret? In der SEO-Blogserie von artd soll auf diese und weitere Fragen eingegangen werden. Die ist Teil 1 von 5 und dient als Einführung und behandelt die Grundzüge von SEO.

SEO steht für Search Engine Optimization, was auf Deutsch Suchmaschinenoptimierung bedeutet. Bei SEO geht es darum Ihre Seite bekannter und sichtbarer zu machen für Nutzer, die mit einer Suchmaschine wie z.B. Google nach Ihren Produkten, Dienstleistungen oder Informationen suchen. SEO lässt sich in einen grösseren Prozess, das Suchmaschinen Marketing, einordnen. Unter diesem Begriff versteht man unter anderem auch die SEA, was für Search Engine Advertising steht, also kostenpflichtige Werbemassnahmen bei Suchmaschinen.

Aber weshalb ist es eigentlich so wichtig, dass Ihre Seite bei Suchmaschinen erscheint? Jeden Tag werden weltweit 88'700 Suchanfragen pro Sekunde durchgeführt. Es besteht also ein riesiges Potential einem Suchenden per Google Ihre Seite und Ihre Produkte zeigen zu können. Und das gilt für praktisch jede Branche, denn heutzutage wird alles über Suchmaschinen gesucht und gefunden. Schlussendlich optimieren Sie Ihre Seite nicht für die Suchmaschine, sondern für Ihre Nutzer. Wichtig bei der SEO ist, dass es nicht bei einer einmaligen Optimierung bleibt. Die Kriterien und die Mitbewerber bei den Suchmaschinen ändern ständig und eine aktuelle Optimierung ist notwendig.


artd webdesign bern SEO google bing SEM

Hauptsächlich werden die beiden Suchmaschinen Google (links) und Bing (rechts) benutzt

Jede Suchmaschine hat ein Programm, „bot“ oder „crawler“ genannt. Dieses Programm folgt allen Links auf Ihrer Seite und indexiert so schlussendlich ein Grossteil des Internets. Nicht indexierte Seiten erscheinen nicht in den Resultaten. Während dem Indexieren untersuchen die „bots“ die Seite auf zusätzliche Informationen und Links, welche auf Ihre Seite zeigen.

Wird ein Suchbegriff bei einer Suchmaschine eingegeben, schaut diese im Index nach den relevantesten Informationen und zeigt diese an. Der Algorithmus, der bestimmt, wo was erscheint, errechnet die Position mithilfe von „ranking factors“. Google benutzt über 900 ranking factors wie z.B. der Inhalt, Struktur, Ort, mobile-Tauglichkeit uvm.

Der Rank Ihrer Webseite zeigt also, wie relevant Ihre Webseite aus Sicht der Suchmaschine für den gesuchten Begriff ist. Aus eigener Erfahrung lässt sich sagen, dass hier insbesondere die obersten zehn Plätze wichtig sind, da viel weniger Suchende auf die zweite Seite gehen.

Bei der Optimierung gibt es zwei grosse Bereiche. Dabei unterscheiden wir zwischen on-page SEO und off-page SEO. On-page SEO bezieht sich alle Optimierungen, die an Ihrer Seite vorgenommen werden können. Das erleichtert es den Suchmaschinen Ihre Seite zu finden, zu indexieren und den Inhalt zu „verstehen“ bzw. zu kategorisieren.  Off-Page SEO sind Massnahmen, die ausserhalb Ihrer Website vorgenommen werden.

In dieser Serie von wöchentlichen Blogbeiträgen soll jede Woche auf eines der folgenden Themen eingegangen werden:

  • On-Page Massnahmen
  • Off-Page Massnahmen
  • Keywords SEO
  • Performance Analyse

Stay tuned!



21. Dezember 2016

Free Joomla! Template als Weihnachtsgeschenk

21. Dezember 2016

Wir haben dieses Jahr ein besonderes Weihnachtsgeschenk für unsere Leser:  Zum Jahresende möchten wir uns mit einem Joomla! Freebie bei dir bedanken.

Wir schenken dir ein selbst entwickeltes responsives Template für das Joomla! CMS, das du kostenlos nutzen kannst.

 

tork mockup

 


15. September 2016

Marketing Automation, das New School of Online Marketing

15. September 2016

marketing automation

Marketing Automation beinhaltet mehrere verschiedene Systeme und dient der Automation von Marketing- und Verkaufsaktivitäten. Es ist eine Antwort auf die Anforderungen an neue Technologien, welche das moderne Marketing stellt.

Das Kundenverhalten hat sich über die Jahre drastisch verändert und verändert sich auch weiterhin stetig. Kunden haben heutzutage die Möglichkeit Informationen über viele verschiedene Kanäle zu beschaffen und dafür verwenden sie eine Vielzahl von unterschiedlichen Geräten und Quellen.

Gerade deshalb benötigt das Marketing eine Technologie, welche diese unterschiedlichen Kanäle der Informationsbeschaffung mit den spezifischen Wünschen des Kunden verbindet. Diese benötigte Technologie nennt sich Marketing Automation.


08. September 2016

Neue Praktikantin

08. September 2016

Hallo Zusammen

Ich bin Angela und wurde am 5. September 2016 bei artd als Praktikantin herzlichst begrüsst.
Im Sommer 2016 habe ich meine Ausbildung als Informatikerin mit Fachrichtung Applikationsentwicklung bei der Informatikmittelschule Bern abgeschlossen.Die Arbeit am und mit dem Computer ist für mich das Gösste.
Es gibt keinen Beruf der mir besser gefallen könnte.
Doch nicht nur beruflich, sondern auch privat bin ich gerne am Computer. Dabei allerdings eher um etwas mit Freunden zu spielen, oder um Videos zu bearbeiten.

Allerdings findet man mich nicht immer vor dem Computer, denn ich liebe es ausserdem Unterwegs zu sein, oder Klavier zu spielen.
Um noch mehr Erfahrungen in verschiedenen Bereichen der Informatik zu sammeln, habe ich mich für ein Praktikum nach der Ausbildung entschieden.
Sehr freue ich mich über die Gelegenheit, dieses bei artd absolvieren zu dürfen.

angela hess

Ich hoffe, dass ich in den kommenden Monaten immer wieder auf neue spannende Herausforderungen stossen werde,
die Möglichkeit habe viel neues zu lernen und meine Fähigkeiten bei aufregenden Webprojekten einbringen und ausbauen kann.
Ausserdem kann vielleicht auch ich das ein oder andere weitergeben, welches ich während meiner Ausbildung gelernt habe.
Bei artd liegt auf jeden Fall eine spannende und aufregende Zeit vor mir und ich freue mich sehr darauf.




02. März 2016

Bulletproof your WordPress Website with the Best WordPress Security Plugins

02. März 2016

Have you ever gotten one of your sites hacked? If not, then just the idea of it happening is very terrifying. Believe me, we got around 10 websites hacked using WordPress on other servers from clients.

Don't get me wrong, WordPress is great and a very secure platform. But still you don't want to lose your WordPress site due to a security hole inside a theme or plugin. There are many ways your site can get hacked. SQL database injections and brute force logins are just some ways a hacker can enter your site to do harm.

Sadly, there is always going to be attackers that will try to hack your site. But don't worry, with the following tips you will get a better night sleep. Resting assured that your site is bulletproof.

Seite 1 von 5
team work2