Jekyll2023-11-17T18:42:16+01:00https://marcel-artz.de/feed.xmlMarcels SiteDokumentationen über meine Projekte rund um Scripting, Linux, IT-Sicherheit und KryptographieMarcel ArtzSuchmaschinenoptimierung - Kurzreferenz (SEO Cheatsheet)2022-03-20T00:00:00+01:002022-03-20T00:00:00+01:00https://marcel-artz.de/posts/Suchmaschinenoptimierung-Kurzreferenz-SEO-Cheatsheet<h2 id="inhalt">Inhalt</h2>
<ol>
<li><a href="#einleitung">Einleitung</a></li>
<li><a href="#ein-paar-grundstze-vorab">Ein paar Grundsätze vorab</a></li>
<li><a href="#planung-und-organisation">Planung und Organisation</a>
<ol>
<li><a href="#wahl-der-domainadresse">Wahl der Domainadresse</a></li>
<li><a href="#duplicate-content">Duplicate Content</a></li>
<li><a href="#https-verwenden">HTTPS verwenden</a></li>
<li><a href="#subdomain-www">Subdomain www</a></li>
<li><a href="#benennung-und-aufbau-der-verzeichnisstruktur">Benennung und Aufbau der Verzeichnisstruktur</a></li>
</ol>
</li>
<li><a href="#webseiteninhalt-suchmaschinenfreundlich-aufbereiten">Webseiteninhalt suchmaschinenfreundlich aufbereiten</a>
<ol>
<li><a href="#keyword-dichte-und-textgewichtung">Keyword-Dichte und Textgewichtung</a></li>
<li><a href="#eine-gute-berschrift">Eine gute Überschrift</a></li>
<li><a href="#html5-meta-tags">HTML5-Meta-tags</a></li>
<li><a href="#skripte-stylesheets-und-valides-html">Skripte, Stylesheets und valides HTML</a></li>
</ol>
</li>
<li><a href="#webseiten-marketing">Webseiten-Marketing</a>
<ol>
<li><a href="#robotstxt">robots.txt</a></li>
<li><a href="#indexierung-der-website-durch-crawler">Indexierung der Webseite durch Crawler</a></li>
<li><a href="#linkaustausch">Linkaustausch</a></li>
<li><a href="#indirekt-verlinkt-werden-durch-die-verffentlichung-vor-artikeln">Indirekt verlinkt werden durch die Veröffentlichung vor Artikeln</a></li>
<li><a href="#nutzerbindung-und-erhhte-aufrufe">Nutzerbindung und erhöhte Aufrufe</a></li>
</ol>
</li>
<li><a href="#weiterfhrende-links">Weiterführende Links</a></li>
</ol>
<h2 id="einleitung">Einleitung</h2>
<p>Im Laufe der Zeit haben sich einige Dos and Don’ts zum Bereich Suchmaschinenoptimierung (SEO) angesammelt, die ich mit euch in diesem Post teilen möchte.
Die einzelnen Tipps können separat gelesen werden und sollen als Nachschlagmöglichkeit dienen.
Um diese Referenz möglichst kurzzuhalten, sind triviale Erklärungen nicht zusätzlich notiert.</p>
<h2 id="ein-paar-grundsätze-vorab">Ein paar Grundsätze vorab</h2>
<p>Nicht benötigte Daten gehören nicht auf die Webseite.
Solche Daten verfälschen die thematische Einordnung des Webseiteninhalts.
Veraltete Technologien wie Flash sollten selbstredend nicht verwendet werden.
Das Einbinden von etlichen Bibliotheken verlangsamt das Laden der Webseite und erhöht den Datenverbrauch des Besuchers.
Aus dem gleichen Grund sollten viele oder große Grafiken bewusst eingesetzt werden.
Eine längere Ladezeit führt schnell zu einem schlechteren SEO-Ranking.
Grafiken sollten zudem immer mit einem <code class="language-plaintext highlighter-rouge">alt</code> Attribut versehen werden.</p>
<p>iFramesets sollten nicht verwendet werden.</p>
<hr />
<h1 id="planung-und-organisation">Planung und Organisation</h1>
<h2 id="wahl-der-domainadresse">Wahl der Domainadresse</h2>
<p>Das Hauptkeyword der Website ist im Idealfall (alleiniger) Bestandteil der Domainadresse.
Für renommierte und viel beworbene Firmen eignet sich der Firmenname,
für andere Firmen oftmals »Firmenname-Tätigkeitsfeld«.
Für persönliche Seiten wie Blogs etc. eignet sich »vorname-nachname.de«.
Der Bindestrich ist in beiden Fällen für eine bessere Lesbarkeit empfehlenswert.</p>
<p>Die Länge der Domainadresse sollte verhältnismäßig kurz und prägnant sein.
Ist der Nachname außerordentlich lang, kann darüber nachgedacht werden den Vornamen abzukürzen oder ganz wegzulassen.
Schwer lesbare Adressen sollten nicht verwendet werden.
Auch nicht, wenn die Adresse aus dem Nachnamen besteht.
Teilweise bieten sich Adressen der Form »nachname-tätigkeitsfeld« als Alternative an.</p>
<p>Grundsätzlich sollte das im Domainnamen stehen worunter man gefunden werden möchte.</p>
<p>Die Domainendung (alias Top-Level-Domain) sollte individuell passend gewählt werden.
Oftmals bietet sich ».de« als renommierte Domainendung für deutschsprachige Websites an.
Im englischsprachigen / internationalen Bereich bietet sich grundsätzlich ».com« an.
(Die URL-Endung sollte landesspezifisch angepasst sein.)</p>
<h2 id="duplicate-content">Duplicate Content</h2>
<p>Es macht praktisch keinen Sinn sich mehrere Domains zu sichern.
Ausnahmen bilden z.B. <a href="https://de.wikipedia.org/wiki/Domaingrabbing">Domain-Grabbing</a> oder
wenn weltweit bekannte Unternehmen Nutzern die Möglichkeit bieten möchten durch landesspezifische Top-Level-Domains einfacher zu finden zu sein.
Es besteht nämlich die Gefahr, falls alle Domains auf denselben Inhalt zeigen,
dass die Suchmaschine zwar alle Inhalte findet,
sich für die Zukunft jedoch nur die entdeckte “Hauptdomain” merkt (und die anderen ignoriert),
oder sogar alle Inhalte nicht mehr listet.</p>
<p>Jede erdenkliche Art von Duplicate Content sollte vermieden werden!</p>
<h2 id="https-verwenden">HTTPS verwenden</h2>
<p>Jede Website sollte <a href="https://developer.mozilla.org/de/docs/Glossary/https">HTTPS</a> unterstützen.
Ein Zertifikat kann bei Certificate-Authentication-Authorities wie Let’s Encrypt beantragt werden.
Nach der Zertifizierung muss nur noch jeder User, der die Webseite über eine unverschlüsselte Verbindung via HTTP aufruft, umgeleitet werden.
Dies ist z.B. mittels der ».htaccess-Datei« möglich, welche im Root-Verzeichnis der Website abgelegt wird.
Wenn später weitere Rewrite-Rules genutzt werden, d.h. zusätzlich zur Umleitung,
ist es sinnvoll die Regel zur Weiterleitung vor den anderen Rewrite-Regeln anzuwenden (d.h. vor die anderen Regeln zu schreiben).</p>
<p><em>Eintrag in der <a href="https://httpd.apache.org/docs/2.4/howto/htaccess.html">.htaccess-Datei</a>: Falls die Webseite nicht über Port 443 (ist HTTPS zugewiesen) aufgerufen wird, soll dem User eine “Site Moved” Nachricht geschickt werden:</em></p>
<div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>RewriteEngine On
RewriteCond %{SERVER_PORT} !=443
RewriteRule ^(.*)$ https://your-domain.tld/$1 [R=301,L]
</code></pre></div></div>
<p>Weitere Informationen zu mod_rewrite Regeln sind auf dem <a href="https://cheatography.com/davechild/cheat-sheets/mod-rewrite/">Cheatsheet von Dave Child</a> und auf <a href="https://modrewrite.de/">modrewrite.de</a> zu finden.</p>
<h2 id="subdomain-www">Subdomain www</h2>
<p>Die Subdomain »www« wird heutzutage nicht mehr benötigt.
Für Firmen mit einer “älteren” Kundschaft, kann es sinnvoll sein sie als Hauptdomain zu verwenden,
um die Besucher der Webseite nicht zu irritieren.
Außerdem wird der www-Zusatz häufig in Signaturen in Office etc. verwendet und lässt jeden erkennen,
dass es sich um eine URL handelt.</p>
<p>Da manche User jedoch die URL ohne den www-Zusatz eintippen, sollten diese User automatisch umgeleitet werden.
Eine Regel zur Umleitung kann in der .htaccess-Datei festgeschrieben werden:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>RewriteEngine on
Rewritecond %{HTTPS_HOST} !^www\.your-domain\.tld
RewriteRule ^(.*) https://www.your-domain.tld/$1 [R=301,L]
</code></pre></div></div>
<p><em>Eintrag in der .htaccess-Datei</em></p>
<p><em>Nice to know</em>: Abseits des Bereiches SEO sind (Sub-)Domains wichtig für das Setzen von Cookies, da Cookies nicht von der <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin">Origin</a> (bestehend aus Protokoll + Domain + Port) abhängig sind, sondern von der <a href="https://developer.mozilla.org/en-US/docs/Glossary/Domain">Domain</a> sind.</p>
<h2 id="benennung-und-aufbau-der-verzeichnisstruktur">Benennung und Aufbau der Verzeichnisstruktur</h2>
<p>Alle Dateien (selbst Bilder, Dokumente etc.) sollten einen eindeutigen, von jeder Person lesbaren Namen tragen. Dies kann abhängig vom Parser etc. für eine hübschere URL wie »www.your-domain.de/auswertung/versuchsdaten.pdf« sorgen.
Bei dynamisch generierten URLs sollten Möglichkeiten geschaffen werden, um diese für den Menschen lesbar zu generieren.</p>
<p>Die Verzeichnisstruktur kann dazu genutzt werden die URL mit Schlüsselwörtern anzureichern. Bsp. für das Verzeichnis »it-sicherheit«: »www.marcel-artz.de/blog/it-sicherheit/artikelname«.</p>
<p>Dateiendungen wie .html oder .php können zudem automatisch aus der URL entfernt werden.</p>
<p>Die Navigation sollte aus Textlinks bestehen, nicht aus Grafiken.
Jede Seite sollte eine <a href="https://www.sitemaps.org/">Sitemap</a> besitzen.
Von einer ausufernden <a href="https://www.ionos.de/digitalguide/websites/webseiten-erstellen/was-ist-ein-footer/">Footer-Navigation</a> ist abzuraten,
da sie besonders bei größeren / größer werdenden Seiten als »Keyword-Spamming« von den Suchmaschinen angesehen werden kann.
Die Footer-Navigation ist zu unterscheiden von einer Navbar, die sich am unteren Bildschirmrand befinden kann.
Eine solche Bottom-Navbar lässt sich leicht mit <a href="https://getbootstrap.com/docs/4.0/examples/navbar-bottom/">Bootstrap</a> umsetzen.</p>
<hr />
<h1 id="webseiteninhalt-suchmaschinenfreundlich-aufbereiten">Webseiteninhalt suchmaschinenfreundlich aufbereiten</h1>
<h2 id="keyword-dichte-und-textgewichtung">Keyword-Dichte und Textgewichtung</h2>
<p>Verschiedene Quellen geben unterschiedliche Angaben bezüglich der Keyword-Dichte an,
weshalb an dieser Stellen kein Prozentwert angegeben werden kann.
Im ersten Absatz eines Textes sollten die wichtigsten Schlüsselwörter auftauchen.
Es ist empfehlenswert Schlüsselwörter in die Überschrift einzubinden
oder in Fettschrift zu markieren oder
um einen Link zu weiterführenden Informationen zu ergänzen.</p>
<p>Eine Auflistung der Unterseiten sollte den Startpunkt einer jeden Seite darstellen,
weil die dort vorhandenen Keywords die Seite meist gut abbilden.</p>
<h2 id="eine-gute-überschrift">Eine gute Überschrift</h2>
<p>In dem HTML-<title>-Tag sollten wichtige Schlüsselbegriffe genannt werden.
Darunter fallen der Name des Unternehmens / Betreibers, eine kurze Beschreibung,
eine Ansammlung an Keywords. Ein Bsp.: Marcel Artz - Dokumentationen über meine IT-Projekte rund um Red Teaming, Scripting, Dark-Themes und Kryptografie!</p>
<h2 id="html5-meta-tags">HTML5-Meta-tags</h2>
<p>Die folgenden HTML5-Meta-tags sind empfehlenswert:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Meine tolle Seite - Hier preise ich an wie toll sie ist und was sie alles zu bieten hat."</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"keywords"</span> <span class="na">content=</span><span class="s">"seo, optimierung, google, meta tags, gute Beschreibung, Aufbau, beispiel"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"robots"</span> <span class="na">content=</span><span class="s">"INDEX,FOLLOW"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"revisit"</span> <span class="na">content=</span><span class="s">"After 7 days"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"language"</span> <span class="na">content=</span><span class="s">"de"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"Marcel Artz"</span><span class="nt">></span>
</code></pre></div></div>
<p>Das Metadata “revisit” sollte nach den eigenen Bedürfnissen angepasst werden.
Es gibt dem Crawler eine Empfehlung an wie oft er vorbeikommen soll.
Ob sich der Crawler daran hält, steht jedoch nicht fest.
Daher darf die Zweckmäßigkeit von “revisit” kritisch betrachtet werden.</p>
<p>Keywords sollten im Singular verwendet werden.
Nur Keywords, die der Nutzer häufiger im Plural eintippt, sollten im Plural stehen.</p>
<p>Auf die Umwandlung der Umlaute in z.B. »ae, ue, oe« sollte verzichtet werden.</p>
<h2 id="skripte-stylesheets-und-valides-html">Skripte, Stylesheets und valides HTML</h2>
<p>Skripte sollten immer über eine / mehrere externe JavaScript-Dateien geladen werden.
Die JavaScript-Datei sollte als allerletztes Element im <body> eingebunden werden,
um den Seitenaufbau zu beschleunigen.
Ausnahmen von dieser Regel bilden z.B. das Einbinden von <a href="https://analytics.google.com/">Google Analytics</a>.</p>
<p>Skripte sollten vermieden werden, wenn sie keinen essenziellen Mehrwert bieten.</p>
<p>CSS-Dateien sollten ebenfalls über eine / mehrere externe CSS-Dateien geladen werden.
Um die Dateien einfacher warten zu können,
empfiehlt sich ggf. eine Aufteilung auf mehrere CSS-Dateien.</p>
<p>Alle Skripte, der HTML-Quelltext und alle Stylesheets sollten valide und funktionsfähig sein.
Hierfür eignen sich Online-Validatoren wie der <a href="https://validator.w3.org/#validate_by_input">Markup Validation Service</a> des W3C.</p>
<hr />
<h1 id="webseiten-marketing">Webseiten-Marketing</h1>
<h2 id="anmelden-bei-suchmaschinen">Anmelden bei Suchmaschinen</h2>
<p>Manche Suchmaschinen eignen sich besonders für eine spezielle Zielgruppe.
Hast du eine bestimmte Zielgruppe,
so ist es ratsam solche Suchmaschinen ausfindig zu machen und sich dort,
wenn möglich, indexieren zu lassen.</p>
<p>Ansonsten ist es generell ratsam sich bei Google und Bing anzumelden.
Suche dafür nach der <a href="https://search.google.com/search-console">Google Search Console</a> (welche zudem weitere SEO-Strategien bereithält) und nach <a href="https://www.bing.com/webmasters/">Bing Webmasters</a>.</p>
<h2 id="robotstxt">robots.txt</h2>
<p>Die <a href="https://developers.google.com/search/docs/advanced/robots/intro?hl=de">robots.txt</a> muss im Root-Verzeichnis hinterlegt werden,
darf nur einmal existieren und muss kleingeschrieben werden.</p>
<p>Anweisungen in dieser Datei bestehen aus zwei Teilen:</p>
<ol>
<li>Die User-Agent-Definition: Benutze dafür den Namen des User-Agents der Suchmaschine, mit welcher die Webseite gefunden werden wollten, oder ein Asterisk (*) um alle User-Agents anzusprechen.</li>
<li>Die Anweisungen: mit »Allow« kann die Indexierung (einzelner Verzeichnisse) erlaubt, mit »Disallow« verboten werden. Folgt nach der Anweisung Disallow keine Angabe, so ist alles erlaubt.</li>
</ol>
<p>Hier ein Beispiel:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>User-agent: searchengine-bot
Disallow: /private/documents/
User-agent: *
Disallow: /backup/
Disallow: /not-for-you/secret.html/
User-agent: ixquick-bot
Disallow:
</code></pre></div></div>
<p><em>Beispiel einer robots.txt</em></p>
<p>Es sollte klar sein, dass die robots.txt öffentlich einsehbar ist und lediglich eine Richtlinie für Crawler darstellt.
Sie dient nicht dazu bestimmte Verzeichnisse zu verstecken.</p>
<h2 id="indexierung-der-website-durch-crawler">Indexierung der Website durch Crawler</h2>
<p>Um einen Eindruck davon zu bekommen, wie ein Webcrawler eine Website sieht,
kann ein Text-Browser wie <a href="https://www.brow.sh/">browsh</a> verwendet werden.</p>
<hr />
<h2 id="linkaustausch">Linkaustausch</h2>
<p>Links auf externen Seiten,
die auf deine Seite verweisen sind bei Suchmaschinen gerne gesehen.
Dementsprechend ist es wünschenswert sogenannte »Linktauschpartner« zu finden.</p>
<h3 id="vorbereitungen-zum-linkaustausch">Vorbereitungen zum Linkaustausch</h3>
<p>Auswahl der potenziellen Partner nach den folgenden Kriterien:</p>
<ul>
<li>Für welche Schlüsselwörter soll deine Seite optimiert werden?</li>
<li>Wonach sucht deine Zielgruppe?</li>
<li>Wie könnte ein Link auf deine Seite auf der Partnerseite aussehen?</li>
</ul>
<p>Deinen Link aufwerten:</p>
<ul>
<li>Gleiche Frage: Wie könnte ein Link auf deine Seite auf der Partnerseite aussehen?</li>
<li>Was bieten deine Seiten im Vergleich zur Konkurrenz?</li>
<li>Wie würdest du deine Seite / Ihr Angebot beschreiben?</li>
</ul>
<p>Verwende am besten auf unterschiedlichen Seiten unterschiedliche Beschreibungen etc.
So vermeidest du die Gefahr als Spam wahrgenommen zu werden und
personalisierst gleichzeitig deinen Link.</p>
<h3 id="anforderungen-an-einen-guten-austauschpartner">Anforderungen an einen guten Austauschpartner</h3>
<p>Dein Austauschpartner sollte:</p>
<ul>
<li>über ein (sehr) gutes Ranking verfügen</li>
<li>der gleichen Webseitenkategorie angehören, z.B. Anime & Mangas</li>
<li>Übereinstimmungen in Thematik, Keyword-Dichte, Seitentitel etc. haben</li>
<li>eventuell bereits sehr gute Linkaustauschpartner haben</li>
<li>nach Möglichkeit lange existieren</li>
<li>eine valide Webseite haben</li>
<li>eine Website frei von Rechtschreibung- und Grammatikfehlern besitzen</li>
<li>eine seriöse Website mit passender (Top-Level-)Domain haben</li>
</ul>
<p>Im Zweifelsfall gilt: Auf einen Linkaustausch verzichten!</p>
<h3 id="bedingungen-für-die-gegenseitige-verlinkung-schriftlich-vereinbaren">Bedingungen für die gegenseitige Verlinkung schriftlich vereinbaren</h3>
<p>Frage höflich beim Webmaster der Website nach und lege ihm die Vorteile einer Verlinkung mit dir dar.
Schmeichel ihm.
Nenne deinen guten Pagerank.
Deine Qualitätsmerkmale.
Alles was dich einzigartig macht.
(lol)</p>
<p>Kläre alle Vereinbarungen detailliert und schriftlich ab.</p>
<p>Der Verweis auf deine Seite sollte im Idealfall im ersten Drittel der Website,
jedoch nicht im Footer sein.
Achte darauf, dass der Link nicht das Attribut »nofollow« trägt.</p>
<p>Zum Zeitpunkt der Erstellung dieses Abschnittes ist mir nichts über die Vor- und Nachteile von reziproken Links bekannt.
(Stand 3. Sep. 2019)</p>
<h3 id="einen-geeigneten-tauschpartner-in-der-praxis-finden">Einen geeigneten Tauschpartner in der Praxis finden</h3>
<p>Hier hilft nur suchen.
Zum Beispiel mit der Suchmaschine <a href="https://metager.de/">MetaGer</a>.
Vielleicht finden sich auch regionale Partner oder Kunden,
die dich auf Ihrer Seite mit Dankesworten bewerten.</p>
<p>Ein gutes Bewertungssystem bietet das englischsprachige Linkaustauschsystem »Link Vault«.
Eine bekannte deutsche Linkaustauschbörse ist Webmasterwelt. (Stand Sep. 2019)</p>
<h2 id="indirekt-verlinkt-werden-durch-die-veröffentlichung-vor-artikeln">Indirekt verlinkt werden durch die Veröffentlichung vor Artikeln</h2>
<p>Schreibe Artikel auf fremden Websites und hinterlasse so Links zu deiner Webseite.</p>
<hr />
<h2 id="nutzerbindung-und-erhöhte-aufrufe">Nutzerbindung und erhöhte Aufrufe</h2>
<p>Binde Nutzer durch neue Artikel, RSS- und Atom-Feeds, Newsletter etc. und motiviere
die Nutzer deine Website mit Freunden zu teilen.
Diese Motivation sollte im Idealfall intrinsischer Natur sein und durch Merkmale wie Qualität und Aktualität deiner Website hervorgerufen werden.</p>
<hr />
<h2 id="weiterführende-links">Weiterführende Links</h2>
<h3 id="htaccess">.htaccess</h3>
<p><a href="http://modrewrite.de/">modrewrite.de</a></p>
<p><a href="https://cheatography.com/davechild/cheat-sheets/mod-rewrite/">htaccess Cheat Sheet</a></p>
<p><a href="https://www.askapache.com/htaccess/#Creating_Htaccess_Files">Guide to creating htaccess files</a></p>
<h3 id="schlüsselwörter-finden">Schlüsselwörter finden</h3>
<p><a href="https://www.wordtracker.com/">https://www.wordtracker.com/</a></p>
<p><a href="https://trends.google.de/trends/">Google Trends</a></p>
<p><a href="https://ads.google.com/home/tools/keyword-planner/">Google Ads Keyword Planner</a></p>
<h3 id="weitere-seo-guides">Weitere SEO-Guides</h3>
<p><a href="https://developers.google.com/search/docs/beginner/seo-starter-guide">Startleitfaden zur Suchmaschinenoptimierung (SEO) by Google</a></p>
<p><a href="https://developers.google.com/search/docs/advanced/guidelines/get-started">Einstieg für fortgeschrittene Nutzer - SEO by Google</a></p>
<p><a href="https://de.ryte.com/wiki/Kategorie:Suchmaschinenoptimierung">Ryte Wiki zu SEO</a></p>
<p><a href="https://www.ionos.de/tools/seo-check">Ionos SEO Checker</a></p>
<p><a href="https://web.dev/measure/">Measure Page Quality with PageSpeed Insights</a></p>Marcel ArtzInhalt Einleitung Ein paar Grundsätze vorab Planung und Organisation Wahl der Domainadresse Duplicate Content HTTPS verwenden Subdomain www Benennung und Aufbau der Verzeichnisstruktur Webseiteninhalt suchmaschinenfreundlich aufbereiten Keyword-Dichte und Textgewichtung Eine gute Überschrift HTML5-Meta-tags Skripte, Stylesheets und valides HTML Webseiten-Marketing robots.txt Indexierung der Webseite durch Crawler Linkaustausch Indirekt verlinkt werden durch die Veröffentlichung vor Artikeln Nutzerbindung und erhöhte Aufrufe Weiterführende LinksJekyll unter Ubuntu Linux installieren und konfigurieren2020-03-26T00:00:00+01:002020-03-26T00:00:00+01:00https://marcel-artz.de/posts/Jekyll-installieren-und-konfigurieren<p><em>Getestet mit Ruby 2.5, Bundler 2.1.4 und Jekyll 4.0.0 (und Jekyll 4.1.1)</em></p>
<h2 id="inhalt">Inhalt</h2>
<ol>
<li><a href="#meine-intention-für-diese-anleitung">Intention</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#ein-neues-projekt-erstellen">Einsatz und Konfiguration</a></li>
<li><a href="#ein-version-control-system-hier-git-hinzufügen">Versionskontrolle hinzufügen</a></li>
<li><a href="#tldr-version">tl;dr-Version</a></li>
<li><a href="#weiterführende-konfigurationen-für-das-jekyll-projekt">Weiterführende Konfigurationen für das Jekyll-Projekt</a></li>
<li><a href="#quellen-und-weiterführende-links">Quellen und weiterführende Links</a></li>
</ol>
<h2 id="meine-intention-für-diese-anleitung">Meine Intention für diese Anleitung</h2>
<ul>
<li>eine möglichst knappe Anleitung zu erstellen, welche die komplette Installation und mein verwendetes Setup dokumentiert</li>
<li>eine Anleitung zu erstellen, die Bundler korrekt verwendet</li>
<li>eine Anleitung zu erstellen, die einige weiterführende Fragen aufgreift und im tl;dr-Stil beantwortet, sofern sie dadurch die <a href="https://jekyllrb.com/docs/">offizielle Jekyll-Dokumentation</a> aus meiner Sicht sinnvoll ergänzt</li>
</ul>
<p><br /></p>
<h2 id="installation">Installation</h2>
<p><em>Weiter unten befindet sich eine <a href="##tl;dr-Version">tl;dr-Version</a>.</em></p>
<p><br /></p>
<h3 id="repositories-updaten-hier-mit-apt-gezeigt">Repositories updaten (hier mit apt gezeigt)</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get upgrade <span class="nt">-y</span>
</code></pre></div></div>
<p><br /></p>
<h3 id="ruby-installieren-hier-mit-apt-gezeigt">Ruby installieren (hier mit apt gezeigt)</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt-get <span class="nb">install</span> <span class="nt">-y</span> ruby-full
</code></pre></div></div>
<p><br /></p>
<h3 id="bundler-und-jekyll-installieren">Bundler und Jekyll installieren</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>bundler jekyll
</code></pre></div></div>
<p>Falls es dabei zu Problemen der Art <code class="language-plaintext highlighter-rouge">You don't have /home/username/.gem/ruby/2.5.0/bin in your PATH,gem executables will not run.</code>kommen sollte, kann Gems mit folgendem Befehl zum PATH hinzugefügt werden:</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s1">'PATH="$(ruby -r rubygems -e '</span>puts Gem.user_dir<span class="s1">')/bin:$PATH"'</span> <span class="o">>></span> ~/.zshrc
</code></pre></div></div>
<p>(.zshrc ggf. durch die verwendete Shell (z.B. Bash) ersetzen.)</p>
<p><em>Bundler sollte ohne <code class="language-plaintext highlighter-rouge">root</code>-Rechte installiert und ausgeführt werden.</em></p>
<p><br /></p>
<h2 id="ein-neues-projekt-erstellen">Ein neues Projekt erstellen</h2>
<h3 id="bundler-initialisieren">Bundler initialisieren</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mkdir </span>my-project
<span class="nb">cd </span>my-project
bundle init
</code></pre></div></div>
<hr />
<p>**Alle folgenden Shell-Befehle werden im Root-Verzeichnis des aktuellen Projektes ausgeführt **</p>
<hr />
<p><br /></p>
<h3 id="bundler-konfigurieren">Bundler konfigurieren</h3>
<p>Dieser Schritt dient dazu projektbezogene Abhängigkeiten ohne Tools wie <a href="https://www.docker.com/">Docker</a> vom Rest des Systems zu isolieren und auf einfache Weise die Kontrolle über bestimmte Versionen von anderweitig verwendeten Gems zu behalten (mehr siehe <a href="###Weitere Dependencies zum Projekt hinzufügen###">unten</a>).</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle config <span class="nb">set </span>path <span class="s1">'vendor/bundle'</span>
</code></pre></div></div>
<p><br /></p>
<h3 id="jekyll-via-bundler-zum-projekt-hinzufügen">Jekyll via Bundler zum Projekt hinzufügen</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle add jekyll
</code></pre></div></div>
<p><br /></p>
<h3 id="die-verzeichnisstruktur-für-das-jekyllprojekt-erzeugen">Die Verzeichnisstruktur für das Jekyllprojekt erzeugen</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll new <span class="nt">--force</span> <span class="nt">--skip-bundle</span> <span class="nb">.</span> <span class="c"># Don't forget the dot!</span>
bundle <span class="nb">install</span> <span class="c"># installs missing gems</span>
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">--force</code> wird benötigt, da der Ordner nicht leer ist</p>
<p><code class="language-plaintext highlighter-rouge">--skip-bundle .</code> wird benötigt, um <code class="language-plaintext highlighter-rouge">bundle install</code> seperat auszuführen (andernfalls könnte es zu Problemen mit Jekyll und dem bereits existierendem Gemfile geben.)</p>
<p><br /></p>
<h3 id="die-seite-für-die-lokale-entwicklung-zum-laufen-bringen">Die Seite für die lokale Entwicklung zum Laufen bringen</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>
<p>Die Seite ist nun unter http://127.0.0.1:4000 zu finden.</p>
<p><strong>Hinweis:</strong> Alle Jekyll-Befehle sollten nun mit dem Präfix <code class="language-plaintext highlighter-rouge">bundle exec</code> versehen werden!</p>
<hr />
<p><br /></p>
<h2 id="ein-version-control-system-hier-git-hinzufügen">Ein Version-Control-System (hier <a href="https://git-scm.com/">Git</a>) hinzufügen</h2>
<h3 id="git-installieren">Git installieren</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt-get <span class="nb">install </span>git
</code></pre></div></div>
<p><br /></p>
<h3 id="git-initialisieren">Git initialisieren</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git init
</code></pre></div></div>
<p><br /></p>
<h3 id="gitignore-hinzufügen">.gitignore hinzufügen</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">touch</span> .gitignore
<span class="nb">echo</span> <span class="s2">"# Ignore metadata generated by Jekyll
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
# Ignore folders generated by Bundler
.bundle/
vendor/"</span> <span class="o">></span> .gitignore
</code></pre></div></div>
<p><br /></p>
<h3 id="initialen-commit-durchführen">Initialen Commit durchführen</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add <span class="k">*</span> <span class="c"># Add to index</span>
git commit <span class="nt">-m</span> <span class="s2">"Initial commit"</span> <span class="c"># Add to head</span>
git tag <span class="nt">-a</span> v0.1 <span class="nt">-m</span> <span class="s2">"Initial build"</span>
</code></pre></div></div>
<hr />
<p><br /></p>
<h2 id="tldr-version">tl;dr-Version</h2>
<h3 id="zur-installation-ohne-git-setup-folgende-befehle-im-gewünschten-projektverzeichnis-ausführen">Zur Installation (ohne Git-Setup) folgende Befehle im gewünschten Projektverzeichnis ausführen:</h3>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get upgrade <span class="nt">-y</span>
<span class="nb">sudo </span>apt-get <span class="nb">install</span> <span class="nt">-y</span> ruby-full
gem <span class="nb">install </span>bundler jekyll
<span class="nb">mkdir </span>my-project
<span class="nb">cd </span>my-project
bundle init
bundle config <span class="nb">set </span>path <span class="s1">'vendor/bundle'</span>
bundle add jekyll
bundle <span class="nb">exec </span>jekyll new <span class="nt">--force</span> <span class="nt">--skip-bundle</span> <span class="nb">.</span>
bundle <span class="nb">install</span> <span class="c"># to add missing gems</span>
bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>
<hr />
<p><br /></p>
<h2 id="weiterführende-konfigurationen-für-das-jekyll-projekt">Weiterführende Konfigurationen für das Jekyll-Projekt</h2>
<h3 id="aufteilung-in-git-branches">Aufteilung in Git-Branches</h3>
<p><em>Die folgende Aufteilung hat sich für mich persönlich als nützlich erwiesen und ist kein must have</em></p>
<p>Aufteilung in</p>
<ul>
<li>master: Für User-Seiten oder</li>
<li>gh-pages: Für Projektseiten (Von <a href="https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site">GitHub empfohlen</a>)</li>
<li>testing: Für das Entwickeln und Testen neuer Funktionen</li>
<li>stable: Die fertige Seite aber ohne Posts, Blogbeiträge etc.</li>
</ul>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git checkout <span class="nt">-b</span> gh-pages <span class="c"># for project sites only</span>
git checkout <span class="nt">-b</span> stable
git checkout <span class="nt">-b</span> testing
</code></pre></div></div>
<p><br /></p>
<h3 id="standart-theme-ändern">Standart-Theme ändern</h3>
<p>Im Gemfile einfach die Zeile `gem “minima”, “~> [version]” auskommentieren und ersetzen. Minima ist das Default-Theme für Jekyll.</p>
<p><br /></p>
<h3 id="weitere-dependencies-zum-projekt-hinzufügen">Weitere Dependencies zum Projekt hinzufügen</h3>
<p>Im Gemfile lassen sich unter</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="no">Gem</span><span class="o">::</span><span class="no">Specification</span><span class="p">.</span><span class="nf">new</span> <span class="k">do</span> <span class="o">|</span><span class="n">spec</span><span class="o">|</span>
<span class="n">gem</span> <span class="s2">"name-of-gem"</span><span class="p">,</span> <span class="s2">"~> 1.0.0"</span>
<span class="k">end</span>
</code></pre></div></div>
<p>weitere Plugins installieren.</p>
<blockquote>
<p>Falls die Frage aufkommen sollte: <a href="https://medium.com/@divya.n/gemfile-vs-gemspec-ee72512da246">Gemfile vs Gemspec</a></p>
</blockquote>
<p><br /></p>
<h3 id="die-jekyll-configs-anpassen">Die Jekyll-Configs anpassen</h3>
<p>Die Konfiguration kann in der _config.yml-Datei angepasst werden. Eine <a href="https://jekyllrb.com/docs/configuration/options/">komplette Referenz zur _config.yml</a> und die <a href="https://jekyllrb.com/docs/configuration/default/">Default-Config</a>, sowie <a href="https://jekyllrb.com/docs/configuration/">weitere Konfigurationsmöglichkeiten</a> sind in den Jekyll-Docs zu finden.</p>
<p><br /></p>
<h3 id="die-verzeichnisstruktur-erweitern">Die Verzeichnisstruktur erweitern</h3>
<p>Siehe <a href="https://jekyllrb.com/docs/structure/">hier</a> für eine offizelle Referenz.</p>
<hr />
<p><br /></p>
<h2 id="quellen-und-weiterführende-links">Quellen und weiterführende Links</h2>
<p>Die offizielle Installationsanleitung: https://jekyllrb.com/tutorials/using-jekyll-with-bundler/</p>
<p>Die Jekyll-Docs: https://jekyllrb.com/docs/</p>
<p>Eine einfache Anleitung zu Git (auf deutsch): https://rogerdudler.github.io/git-guide/index.de.html</p>
<p>Ein schlankes aber mächtiges GUI für Git (open-source, für Git, Windows und OS X): https://git-cola.github.io/</p>
<p>Hilfreiche CLI-Befehle für Jekyll (sollten mit dem Präfix <code class="language-plaintext highlighter-rouge">bundle exec</code> verwendet werden): https://jekyllrb.com/docs/usage/</p>Marcel ArtzGetestet mit Ruby 2.5, Bundler 2.1.4 und Jekyll 4.0.0 (und Jekyll 4.1.1)Moonlight2018-12-31T00:00:00+01:002018-12-31T00:00:00+01:00https://marcel-artz.de/posts/Moonlight-Dark-Theme-fuer-IDLE<p>Dieses Dark-Theme ist für <a href="https://github.com/python/cpython/tree/master/Lib/idlelib">IDLE</a> (Integrated Development and Learning Environment), einer Entwicklungsumgebung für die Programmiersprache <a href="https://www.python.org/">Python</a>.</p>
<p>Der Pythoncode wird durch das Moonlight-Theme so aussehen:</p>
<p><img src="/assets/post-images/2018/example-code.png" alt="Bild des Codes" /></p>
<p>(Screenshot)</p>
<p>Das Theme ist mit Installationsanweisungen (auf Englisch) in meinem <a href="https://github.com/ma744/Moonlight">GitHub-Repository</a> zu finden.</p>Marcel ArtzDieses Dark-Theme ist für IDLE (Integrated Development and Learning Environment), einer Entwicklungsumgebung für die Programmiersprache Python.Initialisierung2018-12-29T00:00:00+01:002018-12-29T00:00:00+01:00https://marcel-artz.de/posts/Initialisierung<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kp">public</span> <span class="k">class</span> <span class="nc">Documentation</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">topics</span><span class="p">,</span> <span class="n">author</span><span class="p">,</span> <span class="n">language</span><span class="p">,</span> <span class="n">coding_language</span><span class="p">)</span>
<span class="vi">@topics</span> <span class="o">=</span> <span class="s2">"Scripting, IT-Sicherheit, persönliche Projekte, Linux, Dark Themes"</span>
<span class="vi">@author</span> <span class="o">=</span> <span class="s1">'Marcel Artz'</span>
<span class="vi">@language</span> <span class="o">=</span> <span class="s2">"Deutsch"</span>
<span class="vi">@coding_language</span> <span class="o">=</span> <span class="s2">"Englisch"</span>
<span class="k">end</span>
<span class="k">end</span>
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">»»» Arguments accepted</code></p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">marcelsSite</span> <span class="o">=</span> <span class="no">Documentation</span><span class="p">.</span><span class="nf">new</span>
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">»»» Engine starting...
»»» checking for updates...
»»» Documentation succesfully started!</code></p>Marcel Artzpublic class Documentation def initialize(topics, author, language, coding_language) @topics = "Scripting, IT-Sicherheit, persönliche Projekte, Linux, Dark Themes" @author = 'Marcel Artz' @language = "Deutsch" @coding_language = "Englisch" end end