In diesem Tutorial werden wir die Bedeutung Ihrer Inhalte mit offenen Grafiken, Twitter-Karten und Mikrodaten untersuchen. Auf diese Weise werden Ihre Inhalte attraktiver, relevanter und für potenzielle Nutzer auffindbarer.
Google, Facebook, Twitter und die anderen Plattformen, die Sie und ich zum Teilen und Entdecken von Inhalten verwenden, können unsere Gedanken immer noch nicht lesen. Die Maschinen, die die Cloud mit Strom versorgen, sind darauf angewiesen, dass Sie und ich, Designer und Entwickler, über die Bedeutung unserer Inhalte und deren Beziehung zu unserer Zielgruppe informieren. Indem wir diese Plattformen über Abstraktion und Bedeutung unterrichten, können sie relevantere, provokativere und auffindbare Inhalte anzeigen.
Was ist Entdeckbarkeit??
Auffindbarkeit ist die Leichtigkeit, mit der eine Maschine oder eine Person online relevante Informationen finden kann.
Welcher dieser Facebook-Posts bekommt mehr Aufmerksamkeit?
Welcher dieser Tweets ist der provokativere?
Welches dieser Google-Suchergebnisse für Ihre Interessen relevanter erscheint?
Die oben genannten Unterschiede sind klar. Wenn Sie nicht das Open Graph-Protokoll von Facebook, das Kartensystem von Twitter und Microdata für Suchmaschinen implementieren, werden Ihre Inhalte wahrscheinlich zugunsten der relevanteren Inhalte Ihrer Konkurrenten ignoriert. In diesem Artikel werde ich Ihnen zeigen, wie wichtig es ist, Ihre Zielgruppe zu verstehen, während Sie diese Systeme in Ihr semantisches Markup integrieren.
Markup
Erstens, was genau ist Markup?
„Eine Dokumentauszeichnungssprache ist ein modernes System, um ein Dokument auf eine Weise zu kommentieren, die sich syntaktisch vom Text unterscheiden lässt. - Wikipedia
Einfacher ausgedrückt, ist dies eine Möglichkeit, ein Dokument mit Stiften, Bleistiften oder Computern so zu markieren, zu kommentieren oder zu gestalten, dass es sich symbolisch von Ihrem Text unterscheidet Markieren. Der Begriff stammt von Korrekturlesern, die dies tun würden Markup Manuskripte für Bearbeitungen.
Aus dem Chicago Manual of Style
Korrekturmarken sind eine Form von Markup. Erinnern Sie sich an diese Mittelklasse-Englischkurse (oder waren Sie zu sehr damit beschäftigt, mit Ihrem schicken Walkman zu spielen, um auf sich aufmerksam zu machen ?!)
Es gibt drei Möglichkeiten, wie Sie ein digitales Dokument mit einer Überschrift versehen:
HTML:
Ich bin die beste Überschrift
Markdown
Nein, ich bin die beste Überschrift
Latex
\ section Ich bin LaTeX
Jetzt haben Sie ein klareres Verständnis davon, was LaTeX… ähm, Markup Das heißt, wir erstellen ein einfaches HTML5-Dokument mit einem einzigen Inhalt. Wir werden es verwenden, um die verschiedenen Möglichkeiten zu veranschaulichen, auf die wir Bedeutung in diesen Inhalt einbauen können, wodurch die Auffindbarkeit verbessert wird.
HTML
Erstellen Sie zunächst das anfängliche HTML-Dokument im Texteditor Ihrer Wahl.
Das ist so viel einfacher als früher. Jetzt fügen wir etwas Inhalt hinzu!
Inhalt
Hier ist unser einziger Inhalt, ein Bild einer sehr unglücklichen Katze, in einem Abschnitt innerhalb unseres Dokumentenkörpers.
Aufmuntern, Kumpel…
Titel
Nun, da wir wissen, mit welchen Inhalten wir arbeiten, können wir den ersten Teil hinzufügen Kontext zu unserer Seite. Unser alter Freund, </code> Tag im Dokument <code><head></code>. </p><pre><head> <title> Einsame Feline
Lassen Sie uns mit dem Open Graph-Protokoll von Facebook etwas anspruchsvoller (wenn auch noch einfacher) beginnen!
Das Open Graph-Protokoll von Facebook
Mit dem Open Graph-Protokoll wird aus jeder Webseite ein reichhaltiges Objekt im sozialen Diagramm von Facebook. Dadurch kann jede Webseite eine ähnliche Funktion wie ein Objekt bei Facebook haben.
Das offene Diagramm von Facebook (sowie das Kartensystem von Twitter, das wir als Nächstes betrachten werden) arbeitet mit Metadaten, die Sie auf Ihren Webseiten hinzufügen. ' . Der gleiche Ort, an dem wir uns gerade befinden </code>. Bei Facebook gibt es ein offenes Graph-Protokoll <em>vier Eigenschaften</em> welche benötigt werden.</p><h3>Erforderliches Open Graph Markup</h3><p>Die vier erforderlichen offenen Diagrammeigenschaften, die Facebook benötigt, sind: </p><ol> <li>Titel</li> <li>Art</li> <li>Bild</li> <li>URL</li> </ol><h4>Titel</h4><p>Das erste davon ist das Titel-Tag. Dies ist der Titel Ihres Objekts, wie er auf Facebook angezeigt werden soll.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Mein Beispiel wird so genannt, wenn das HTML-Dokument auf Facebook geteilt wird.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Hinweis</strong>: Wenn Sie einen Titel erstellen, der vom ursprünglichen Titel abweicht, gibt Facebook einen Fehler beim Debuggen Ihrer Seite aus. Facebook erlaubt den Unterschied, aber es wird nicht zu 100% bestätigt. Ich weiß nicht, warum Facebook die Stirn runzelt. Wenn Sie irgendwelche Ideen haben, lassen Sie es mich wissen!</p><h4>Art</h4><p>Die zweite Eigenschaft, die Facebook benötigt, ist der Objekttyp, auf dem Benutzer auf der Plattform angezeigt werden.</p><p>Unser Inhalt repräsentiert keine Musik oder Videos. Es ist auch kein Artikel, Buch oder Profil. Alles, was uns bleibt, ist die Tatsache, dass sich unser Inhalt in einem HTML-Dokument befindet, das beim Hochladen auf einen Webserver zu einer Website wird.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_6.png"><pre><meta property="og:type" content="website" ></pre><h4>Bild</h4><p>Die dritte Eigenschaft, die Facebook benötigt, ist ein Bild, das unser Objekt darstellt. Dieser ist ziemlich einfach!</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_7.png"><pre><meta property="og:image" content="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" ></pre><h4>URL</h4><p>Die vierte und letzte Eigenschaft, die Facebook benötigt, ist die URL, die die Benutzer bei der Interaktion mit dem Objekt erfahren.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Genau wie die image-Eigenschaft ist diese ziemlich unkompliziert.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Das macht es für alles was benötigt wird. Es ist an der Zeit, abstrakter zu werden <em>Bedeutung</em> Wir tragen zu unserem Inhalt bei, und dazu müssen wir unsere Zielgruppe identifizieren.</p><h3>Zielgruppe</h3><p>In diesem Artikel geht es nicht darum, Ihnen zu zeigen, wie Sie Ihre Zielgruppe identifizieren. Ich möchte Sie jedoch darauf aufmerksam machen, wie wichtig es ist, zu wissen, wer das ist. Wenn Sie einen Kontext in Ihren Inhalt einbauen, müssen Sie wissen, von wem Sie Ihren Inhalt entdecken möchten und was er über diesen Inhalt erfahren soll.</p><p>Für den Inhalt dieses Artikels, das Bild der unglücklich aussehenden Katze, ist das Zielpublikum ein Webdesigner, der mehr über die Auffindbarkeit (Sie) erfahren möchte. Mal sehen, wie das im optionalen Markup von Facebook aussieht.</p><h4>Optionales abstraktes Markup</h4><p>Wir können einige zusätzliche Markierungen hinzufügen, beispielsweise eine Beschreibung, die zwar nicht erforderlich ist, aber für jeden, der auf unseren Inhalt trifft, viel interessanter wird.</p><p>Also, was soll unsere Beschreibung sein? Es sollte relativ zur Zielgruppe sein.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_9.png"><pre><meta property="og:description" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ></pre><p>Großartig! Erinnern Sie sich, wie ich Ihnen erzählt habe, dass Twitter auf ähnliche Weise wie das Open Graph-Protokoll von Facebook funktioniert? Lass uns als nächstes einen Blick darauf werfen!</p><h2>Twitter</h2><p>Für Twitter sind unterschiedliche Eigenschaften erforderlich, abhängig vom verwendeten Kartentyp. Für dieses Beispiel verwenden wir die Standardübersichtskarte, für die diese vier Eigenschaften erforderlich sind:</p><ol> <li>Speicherkarten-Typ</li> <li>Zuschreibung</li> <li>Titel</li> <li>Beschreibung</li> </ol><p>Bei den meisten dieser Eigenschaften müssen wir keine zusätzlichen Arbeiten ausführen. Warum das?</p><blockquote>„Wenn der Twitter-Kartenprozessor auf Ihrer Seite nach Tags sucht, wird zuerst nach der Twitter-Eigenschaft gesucht. Falls nicht vorhanden, wird auf die unterstützte Open Graph-Eigenschaft zurückgegriffen. Auf diese Weise können beide unabhängig voneinander auf der Seite definiert werden, und die Anzahl der doppelten Markierungen, die zur Beschreibung Ihres Inhalts und Ihrer Erfahrung erforderlich sind, wird minimiert. - Twitter </blockquote><h3>Minimieren doppelter Markup</h3><p>Das ist großartig! Die Tags, die wir nicht duplizieren müssen (obwohl Sie einen Grund dafür haben könnten), lauten: </p><ol> <li><code>og: titel</code></li> <li><code>og: Beschreibung</code></li> <li><code>og: Bild</code></li> </ol><p>Drei runter, zwei raus!</p><h3>Speicherkarten-Typ</h3><p>Lassen Sie uns zunächst Twitter sagen, welche Art von Inhalten wir teilen. Wir setzen diese Karte auf die Standardübersichtskarte, wenn das HTML-Dokument auf Twitter freigegeben wird.</p><pre><meta name="twitter:card" content="summary" ></pre><p>Das war einfach, wie geht es weiter? Ich hoffe es ist etwas Großartiges!</p><h3>Zuschreibung</h3><p>Twitter erfordert, dass ein Konto einem Twitter-Konto zugewiesen wird, das dem Ersteller des Inhalts und / oder dem Eigentümer des Inhalts gehört. Wenn der Inhalt einer Unternehmensseite oder einer Unternehmensabteilung gehört (oder auf der Firmenwebsite vorhanden ist, aber nicht der Firma gehört), können Sie eine Site-Style-Zuordnung verwenden.</p><p>Wenn Sie auf meiner persönlichen Website gehostet werden, wird dies folgendermaßen aussehen:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>So würde es aussehen, wenn Tuts + Web Design den HTML-Code gehostet hätte:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter muss die Domäne für jede Art von Twitter-Karte authentifizieren und auflisten. Dies ist einfach und automatisiert, obwohl ich nicht weiß, worum es geht, wenn Sie auf der schwarzen Liste stehen. Wenn jemand Erfahrung damit hat, würde ich gerne mehr lernen.</p><p>Das wars für Twitter! Gut, dass wir Open Graph zuerst gemacht haben. Twitter spart viel Zeit, indem es mit anderen Plattformen nach besten Kräften arbeitet. Danke, Twitter!</p><p>Zeit, die Suchmaschinen erneut zu besuchen, um neue, kontextabhängige und aufregende Möglichkeiten zur Optimierung Ihrer Inhalte zu erhalten.</p><h2>Mikrodaten und Suchmaschinenoptimierung</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Zunächst ein kurzes Wort von Microsoft:</p><blockquote>„Am 2. Juni [2011] haben wir [Microsoft] eine Zusammenarbeit zwischen Bing, Google und Yahoo angekündigt, um einen Standardsatz von Schemata für strukturierte Datenmarkierungen auf Webseiten zu erstellen und zu unterstützen. Obwohl unsere Unternehmen in vielerlei Hinsicht miteinander konkurrieren, war für uns klar, dass die Zusammenarbeit in diesem Bereich für jede Suchmaschine einzeln und für die gesamte Branche gut wäre. - Michael O'Connor </blockquote><p>Mikrodaten unterscheiden sich von den anderen Markups, die wir bereits strukturiert haben, darin, dass sie nicht im Dokumentkopf leben.</p><p>Wir werden Mikrodaten verwenden, um den Inhalt in den Inhalt unseres HTML-Dokuments einzubringen. Suchmaschinen verwenden unsere Daten, um die Auffindbarkeit unserer Inhalte für ihre Nutzer zu verbessern.</p><p>Die Maschinen glauben, was wir ihnen sagen. Zumindest jetzt… </p><h3>Erforderliche Mikrodaten-Auszeichnung </h3><p>Die folgenden Tags sind für jedes Element erforderlich, in das Sie eine Bedeutung einbauen möchten. </p><ol> <li>Artikelumfang</li> <li>Gegenstandsart</li> </ol><p>Zuerst müssen wir das identifizieren <em>Ding</em> wir beschreiben Lassen Sie uns ein wenig Spaß mit der Semantik haben und einen Kontext oder eine Bedeutung in unseren Inhalt einbauen, der auf unsere Zielgruppe ausgerichtet ist.</p><p>Denken Sie daran, dass wir nur einen einzigen Inhalt haben. Was ist ein offensichtliches Stückchen Sinn in unserem Bild?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Nun, es sieht sicher aus wie eine Katze. Das ist toll, denn das Internet liebt Katzen! Was <em>Ding</em> Best repräsentiert eine Katze in der uns zur Verfügung stehenden Schema-Markierung?</p><p>Die Bedeutung, die in diesem Bild enthalten ist, ist wahrscheinlich keine Aktion, kein Broadcast-Dienst, eine medizinische Einrichtung oder ein Ort. Es handelt sich definitiv um eine kreative Arbeit, insbesondere um ein visuelles Artwork, obwohl Google derzeit einige Änderungen vornimmt, die die Verwendung dieses Markups kurzfristig beeinflussen könnten:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google Nein, wir haben einige Verzögerungen, die die Hinzufügung von Feb, d. h</p>- Dan Brickley (@danbri) 2. März 2015 </blockquote> <p>Lass uns das erklären <code>Gegenstandsart</code> im Abschnitts-Tag:</p><pre><section itemscope itemtype="https://schema.org/CreativeWork" > <img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </section></pre><p>Das ist ein guter Anfang, obwohl unsere Inhalte noch weitgehend sinnlos sind. Google, Bing, Yahoo und Yandex sind sich jetzt zu 100% sicher, dass unsere Inhalte eine kreative Arbeit sind, aber sonst nichts. Lassen Sie uns noch einen bedeutungsvolleren Kontext für unseren Zielmarkt hinzufügen: Webdesigner.<br></p><h3>Optionale Mikrodateneigenschaften</h3><p>Es ist nicht notwendig, alle Eigenschaften aufzulisten, die Sie mit dem Creative-Work-Elementtyp verwenden können. Stattdessen beziehen sich einige auf Webdesigner, die wir als unsere Zielgruppe identifiziert haben.</p><p>Beginnen wir mit der Erklärung aller Dinge über diesen Inhalt, die nicht abstrakt sind, sondern in ihrer Bedeutung konkret, fest und unveränderlich sind. </p><h4>Bild</h4><p>Dies ist zunächst ein Bild mit einem Quellort (<code>src</code>) im Internet.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Autor</h4><p>Ich bin der Autor oder Schöpfer der digitalen Illustration.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Publikum</h4><p>Gut aussehen! Fügen wir nun unsere Zielgruppe hinzu.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Pädagogische Nutzung</h4><p>Jetzt legen wir die Art des Lernens fest, den wir für dieses Bild beabsichtigen <em>Beispiel</em> in diesem Fall.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Familienfreundlich</h4><p>Nichts davon ist NSFW, also stellen wir sicher, dass das klar ist.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Charakter</h4><p>Wie haben wir unseren Katzencharakter genannt??</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Oh ja. Das ist ein ziemlich toller Name, obwohl er sich in einen abstrakteren Bereich bewegt. Die Dinge werden jetzt alles abstrakt. </p><h4>Über</h4><p>Lassen Sie uns noch etwas mehr über die Situation in unserem Image unserer Zielgruppe hinzufügen.</p><pre><meta itemprop="about" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ><br></pre><p>Lassen Sie uns das Ganze mit einer Liste von durch Kommas getrennten, zielgerichteten und relativen Keywords beenden, um die Erkennbarkeit unseres Inhalts auf über 9000 zu erhöhen.</p><pre><meta itemprop="keywords" content="designer, design, web design, seo, discoverability, open graph, twitter cards, microdata, google, bing, microsoft, yahoo, yandex, content, context, semantics, meaning, sad, cat, animation, gif, cute, illustration, tutsplus" > </pre><h4>Bestätigen</h4><p>Alles, was Sie noch tun müssen, ist die Überprüfung Ihres Codes bei Google, dann bei Facebook und schließlich bei Twitter. So sieht das aus in:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>Twitter</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_12.png"><h4>Google</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_13.png"><h2>Zusammenfassung</h2><p>Wie sieht also alles zusammen aus??</p><pre><!DOCTYPE html> <html> <head> <title> Einsame Feline
Share
Aus dem Chicago Manual of Style
Aufmuntern, Kumpel… 
Accentsconagua