Zwischen Google Chrome, das "Seiten folgen" testet, und einer wachsenden Frustration darüber, wie Social-Media-Plattformen die Reichweite von Kreativen zu ihren Fans durch algorithmische Feeds einschränken, gab es ein erneutes Interesse an RSS-Feeds, und sie sind bereit für ein Comeback im Jahr 2022.
Diese Recherche wird durch die Unterstützung von Frontend Masters, dem offiziellen Lernpartner von CSS-Tricks, ermöglicht.
Benötigen Sie Schulungen für die Front-End-Entwicklung?
Frontend Masters ist der beste Ort dafür. Sie haben Kurse zu allen wichtigen Frontend-Technologien. Interessiert daran, Full-Stack zu werden? Hier ist Ihre beste Wahl
Sie haben vielleicht das Flüstern gehört, dass "RSS tot ist", aber die Wahrheit ist, dass sie immer noch weit verbreitet sind, da praktisch jeder Podcast einen nutzt. Vielleicht waren Sie früher ein RSS-Fan und müssen sich wieder damit vertraut machen. Oder vielleicht sind Sie wie Chris hier bei CSS-Tricks und lieben RSS immer noch. Wie auch immer, RSS ist eine Webtechnologie wie jede andere, und es gibt Best Practices dafür, wie man einen Feed erstellt und kuratiert.
Genau das werde ich Ihnen in diesem Artikel erklären. Sprechen wir über die verschiedenen Arten von Feeds, wie man sie implementiert und welche Strategien Sie anwenden können, um das Beste aus Ihren Feed-Inhalten herauszuholen.
RSS vs. Atom vs. JSON
Glauben Sie es oder nicht, RSS ist nur eines von vielen Formaten für syndizierte Web-Feeds. Die gängigsten Formate sind
Ich habe RSS verwendet, um diese Formate zu bezeichnen, da es ein weitaus populäreres Suchwort ist, aber ich werde diese Technologien in diesem Artikel als Web-Feeds bezeichnen, es sei denn, ich beziehe mich auf ein bestimmtes Format.
Obwohl Atom-, RSS- und JSON-Feeds dasselbe bewirken, gibt es einige Unterschiede zwischen ihnen
- Atom und RSS basieren auf XML, während ein JSON-Feed auf – nun ja – JSON basiert.
- Alle diese Formate können in gewisser Weise erweitert werden. In einem JSON-Feed geschieht dies durch Hinzufügen eines Objekts mit einem Schlüssel, der mit einem Unterstrich beginnt, irgendwo im Objekt eines Feeds. Mit Atom und RSS tun Sie dies, indem Sie den Namespace auf dem Stammelement deklarieren. Ein Beispiel hierfür sind Podcast-Feeds, die den iTunes-Podcast-Namespace deklarieren und die Verwendung von
<itunes:*>-Tags ermöglichen. - JSON Feed ist ein neueres Feed-Format, was bedeutet, dass die Unterstützung dafür möglicherweise nicht so breit gefächert ist wie bei Atom oder RSS. Wenn Sie jedoch einen Podcast haben, ist RSS ein Muss.
- Während alle Formate eine eindeutige Kennung für jeden Eintrag/Artikel erfordern, geht Atom einen Schritt weiter, da es eine eindeutige Kennung für jeden Feed erfordert.
- Alle erlauben HTML-Markup, obwohl sie es unterschiedlich handhaben. JSON verwendet den Schlüssel
content_html, der JSON-escaped HTML enthält. Atom verwendet das Tagcontentmittype=html, das XML-escaped HTML enthält. RSS verwendet das Tag<description>(oder diecontent-Erweiterung), das entweder XML-escaped HTML oder HTML unescaped in einem<![CDATA[]]>-Tag enthält.
Abgesehen von diesen Dingen gibt es nur geringfügige Unterschiede zwischen ihnen. Sie denken vielleicht, dass die Dateigröße ein möglicher Unterschied sein könnte, aber Kompression reduziert sie alle auf wenige Kilobytes pro Stück. Es sei denn, Ihre Anwendung hat einen spezifischen Anwendungsfall, der ein bestimmtes Format erfordert (wie Podcasts), schadet es nicht, mehrere Formate bereitzustellen, aber RSS und Atom haben die meiste Unterstützung.
Was macht einen "guten" Feed aus?
Betrachten wir einige Best Practices für die Erstellung von Feeds. Wie bei den meisten Dingen im Web gibt es Dinge, die wir tun können, um unsere Arbeit zu optimieren und das Beste daraus zu machen.
1. Er ist leicht zu finden
Es hilft nichts, einen Feed zu haben, wenn niemand davon weiß. Und eine Möglichkeit, einen Feed auffindbar zu machen, ist die Verlinkung im <head> Ihrer Website. So können Feed-Reader Ihren Inhaltscrawl durchführen und erkennen, wenn eine Website einen Inhaltsfeed anbietet.
Hier ist ein Beispiel, das alle drei Formate im Dokumentenkopf verlinkt
<head>
<link rel="alternate" type="application/rss+xml" href="https://codelab.farai.xyz/index.rss.xml" title="Farai's Codelab's RSS Feed" />
<link rel="alternate" type="application/feed+json" href="https://codelab.farai.xyz/index.feed.json" title="Farai's Codelab's JSON Feed" />
<link rel="alternate" type="application/atom+xml" href="https://codelab.farai.xyz/index.atom.xml" title="Farai's Codelab's ATOM Feed" />
<!-- etc. -->
</head>Und ja, es ist in Ordnung, alle drei zu verwenden! Sie können so viele Links angeben, wie Sie möchten, obwohl einige Feed-Reader möglicherweise nur den ersten erkennen. Wichtig ist, dass ein Link rel="alternate" und der MIME-type des Feeds enthält. Es gibt auch die Möglichkeit, einen Titel hinzuzufügen, was nie schadet.
Was können Sie noch tun, um Ihren Feed leicht auffindbar zu machen? Bewerben Sie ihn! Platzieren Sie direkte Links zu den Feeds gut sichtbar auf Ihrer Website, damit die Leute sie kopieren und in ihren Feed-Reader einfügen können.
Das macht CSS Tricks. Dies ist der Link zum RSS-Feed der Website und er ist im Footer der gesamten Website verfügbar. Einige Feed-Reader können diese Links auch erkennen, auch wenn sie sich außerhalb des <head> befinden.
Was die Benennung des Feeds selbst betrifft, so spielt es keine Rolle, solange er auffindbar ist. Hier ist ein guter Überblick darüber, wie verschiedene Websites ihre Feeds benennen, aber ich habe meine feed.json, feed.rss.xml und feed.atom.xml für JSON Feed, Atom und RSS benannt.
2. Er nutzt HTTP aus
Es gibt bestimmte grundlegende Funktionen des Webs, die genutzt werden können, um Ihre Feeds ein wenig besser zu machen.
Komprimieren Sie Ihre Feeds beispielsweise, da dies die Gesamtdateigröße und die Downloadzeit erheblich reduziert. Die meisten Server können dies für Sie übernehmen, indem sie gzip, Brotli oder eine andere Komprimierungsmaschine verwenden.
Ebenso ist es eine gute Idee, entweder ETags oder If-Modified-Since zu unterstützen, da beide es Clients ermöglichen, Feeds zu cachen und den Browser darüber informieren, ob eine neuere Version des Feeds bereit ist, bevor er heruntergeladen wird. Ähnlich wie bei der Komprimierung kann Ihr Server dies ebenfalls übernehmen.
Eine weitere Sache, die Sie tun sollten: Ermöglichen Sie permissives CORS. Andernfalls könnten Clients daran gehindert werden, den Feed abzurufen. Und obwohl Sie die Sicherheitsauswirkungen berücksichtigen sollten, wenn Sie zulassen, dass jede beliebige Website Ihren Feed abruft, ist es höchst unwahrscheinlich, dass dies für die meisten kleinen Websites und Feeds ein großes Problem darstellt. Diese Einzeiler reichen aus, um CORS zu aktivieren
Access-Control-Allow-Origin: *3. Er zeigt vollständige Inhalte statt Zusammenfassungen an
Dies ist rein eine Frage der Benutzerfreundlichkeit. Sie haben dies vielleicht selbst erlebt, als Sie einen RSS-Feed abonniert haben und nur den ersten Absatz oder eine Zusammenfassung des Beitrags erhalten. Warum? Das traditionelle Denken ist, dass die Bereitstellung nur einer Zusammenfassung die Benutzer ermutigt, auf Ihre Website zu klicken, was zu mehr Besuchen führt. Und mehr Besuche bedeuten mehr Augen, was mehr Einnahmen bedeutet, usw.
Ich empfehle, dies zu vermeiden und stattdessen Ihre Feeds den vollständigen Inhalt jedes Beitrags/Eintrags/Elements senden zu lassen. Viele Benutzer lesen Inhalte lieber in einem Feed-Reader, da dieser Wert auf Lesbarkeit legt.
Wenn Sie sich Sorgen machen, dass jemand Ihren Inhalt unredlich abschöpft und auf seiner eigenen Website anzeigt, weil Sie den vollständigen Inhalt bereitstellen, lassen Sie mich Ihnen versichern: Es ist nicht schwieriger, eine Webseite zu einem syndizierten Feed zu machen.
Und wenn Sie ein Verleger sind, der auf Display-Anzeigen angewiesen ist, und sich Sorgen über die Auswirkungen machen, die die Übermittlung vollständiger Inhalte auf Ihre Einnahmen haben könnte: Sie können immer noch statische Anzeigen direkt in Ihren Feed-Inhalt einfügen. Außerdem können einige Reader die Webseite, die mit einem Feed-Eintrag verbunden ist, parsen, sodass sie auch im Reader gelesen werden kann.
Aber lassen Sie uns nicht dogmatisch sein, denn es gibt Situationen, in denen Zusammenfassungen sinnvoll sind. Eine davon ist, wenn ein Feed viele lange Einträge enthält. Eine andere ist, wenn Sie reichhaltige Inhalte haben, die nur auf eine bestimmte Weise betrachtet werden können (denken Sie an Show Notes für einen Podcast). Machen Sie in diesem Fall eine gute Zusammenfassung. Ein Beispiel ist RSS von Nielsen Norman Group, das eine Zusammenfassung und einen Auszug bis zum ersten <h2>-Tag enthält.
Wenn ich jemals beschließen sollte, nur Zusammenfassungen in meinem Feed anzuzeigen, würde ich sicherstellen, dass ich zusätzlich zur Zusammenfassung ein Bild, eine Übersicht über die wichtigsten Punkte des Inhalts und einen Link zur kanonischen Version hinzufüge. Es ist zwar etwas Arbeit, gibt dem Leser aber eine Vorstellung davon, was ihn erwartet, im Gegensatz zu einigen Feeds, die ich gesehen habe und die den Inhalt nur auf die ersten paar Wörter verkürzen.
4. Er ist zum *Lesen* konzipiert
Berücksichtigen Sie bei der Erstellung von Inhalten, wie diese außerhalb des Kontexts eines Webbrowsers, an Orten, an denen JavaScript und CSS eingeschränkt sind, angezeigt werden könnten. Sara Soueidan hat eine Reihe von Tipps und Ideen, die es wert sind, angesehen zu werden. Die Hauptidee: bieten Sie eine gute Fallback-Erfahrung für Ihre Inhalte.
Dies ist hauptsächlich ein Problem bei eingebetteten Elementen. Während einige Einbettungen Fallback-Inhalte in ihrer Markup enthalten (wie die eingebetteten Tweets von Twitter und die eingebetteten Pens von CodePen), tun dies andere möglicherweise nicht. Bestimmte Einbettungen (einschließlich Videos, die auf Vimeo veröffentlicht wurden) können nur auf bestimmten Domains eingebettet werden, was bedeutet, dass sie in einem Feed-Reader nicht angezeigt werden. Sie müssen also eine Möglichkeit bieten, sie anzuzeigen, z. B. ein Bild oder einen Link zu einer Webseite.
Es gibt viele Möglichkeiten, Fallbacks zu implementieren. Die Einbettung von Twitter fällt auf ein <blockquote> zurück – was angesichts der Tatsache, dass ein Tweet einer Art Zitat ähnelt, absolut sinnvoll ist – und einen Link zum Tweet selbst, der es einigen Clients, die keine Einbettungen unterstützen, wie Outlook, ermöglicht, die Inhalte effektiv auf eine Weise zu rendern, die für den Benutzer weiterhin zugänglich ist.
Obwohl NetNewsWire gut mit Einbettungen umgeht, verhindert YouTube manchmal, dass Videos wie hier abgespielt werden. Stattdessen fällt die Einbettung auf einen Link zurück, der den Benutzer zum Ansehen auf der YouTube-Website weiterleitet. Outlook unterstützt keine YouTube-Einbettungen (oder überhaupt Einbettungen), aber ein beschreibender Link zum Video auf YouTube ist immer noch verfügbar.
Die Moral von der Geschichte: Kennen Sie Ihre Leser und wie sie Inhalte rendern, damit Sie die bestmögliche Fallback-Erfahrung bieten können.
Vorsicht vor relativen URLs
Ein großes Problem bei Feeds ist die Auflösung relativer URLs für Bilder und Links. Die Auflösung basierend auf dem kanonischen Link des Feeds mag funktionieren, aber was passiert, wenn sich dieser Link in einem Unterverzeichnis befindet? Die XML-Formate könnten das Attribut xml:base verwenden, das die Basis-URL für die Auflösung relativer URLs definiert, aber das wird nur von Atom unterstützt und von den meisten Readern ignoriert und als veraltet betrachtet.
Die robusteste Lösung ist die Verwendung absoluter URLs für jede href und src im Inhalt eines Eintrags. Das bedeutet, dass das Markup etwa so aussieht
<p>Read <a href="https://css-tricks.de/archives/">all our articles</a>.</p>…und weder das hier
<p>Read <a href="/archives/">all our articles</a>.</p>…noch das
<p>Read <a href="archives/">all our articles</a>.</p>Dies ist schwer automatisch zu machen, insbesondere bei statisch generierten Websites. Ein Ansatz ist, relative URLs nach der Kompilierung des Feeds in einer Build-Pipeline in absolute URLs umzuwandeln. Ein anderer Ansatz ist, die Art und Weise zu manipulieren, wie Markdown-Links und Bilder von Ihrem Static Site Generator gerendert werden, sodass die URLs absolut sind. Ich hoffe, dass mehr Static Site Generatoren die zweite Option zulassen, aber vorerst ist Hugo der einzige Static Site Generator, der dies durch Markdown-Render-Hooks unterstützt.
Aber warten Sie, es gibt eine Ausnahme von dieser Regel. Und das sind Fußnoten. Einige Reader können Fußnoten erkennen und sie verarbeiten. Hier ist etwas HTML, das in jedem Feed-Reader funktionieren sollte, der relative Sprunglinks unterstützt
<p>They’d managed to place 27.9MB of images onto the Critical Path.
Almost 30MB of previously non-render blocking assets had just been
turned into blocking ones on purpose with no escape hatch. Start
render time was as high as 27.1s over a cable connection<sup id="fnref:1">
<a href="#fn:1" class="footnote">1</a></sup>.</p>
<div class="footnotes">
<ol>
<li id="fn:1">
<p>5Mb up, 1Mb down, 28ms RTT. <a href="#fnref:1" class="reversefootnote">↩</a></p>
</li>
</ol>
</div>Umgang mit Anzeigen in Feeds
Sie werden unwahrscheinlich JavaScript-Unterstützung in einem RSS-Reader erhalten, und das bedeutet keine Anzeigen, die mit einem Anzeigenserver verbunden sind. Mit anderen Worten, Anzeigen müssen Teil Ihres Inhalts sein, anstatt dynamisch eingefügt zu werden.
PSA: Nicht alle Inhalte müssen in einen Feed aufgenommen werden
Ich habe Feeds gesehen, in denen jedes veröffentlichte Inhaltspaket enthalten und bis zum allerersten Eintrag im Feed verfügbar ist. Ich sehe auch viele Feeds von Verlegern, die Dutzende von Einträgen pro Tag posten. In beiden Fällen empfehle ich, sowohl die Menge der aus vergangenen Archiven verfügbaren Inhalte zu begrenzen als auch mehrere Feeds anstelle eines einzelnen in Betracht zu ziehen.
Perfektes Beispiel. Schauen Sie sich den Feed von MacRumors.com an, da er äußerst aktiv ist und täglich Dutzende neuer Artikel veröffentlicht werden. Können Sie sich vorstellen, in diesem Feed zu einem Artikel von, sagen wir, vor 10 Jahren zurückzukehren? Wahrscheinlich nicht. Es sei denn, der Feed ist für einen Podcast, bei dem das Speichern jeder Episode sinnvoll ist, versuchen Sie, die Anzahl der im Feed gespeicherten Einträge zu begrenzen, da Benutzer wahrscheinlich mehr an neueren Inhalten interessiert sind. Dies reduziert die Bandbreite und die Aktualisierungszeiten, was besonders wichtig ist, da Benutzer viele Feeds aktualisieren müssen.
Ich bin versucht zu sagen, dass 10-15 Beiträge genug sind, um zu speichern und anzuzeigen, aber wie bei vielen Dingen "kommt es darauf an". Während die Speicherung von einigen wenigen für eine Website, die mehrmals im Monat neue Inhalte veröffentlicht, sinnvoll ist, können andere Websites, die viel häufiger posten, dies an einem Tag überschreiten. Die ideale Anzahl von Beiträgen hängt also wirklich von der Art der von Ihnen veröffentlichten Inhalte ab (sind sie zeitkritisch oder immergrün?) und sowohl vom Volumen als auch von der Häufigkeit Ihrer Veröffentlichungen (sind es viele über den Tag verteilt oder wenige pro Monat?).
Aber worauf ich wirklich hinauswill, ist, dass Sie vermeiden wollen, Benutzer zu überwältigen, indem Sie sie mit einem Stapel von Artikeln eindecken, durch die sie sich kämpfen müssen. Ein paar Möglichkeiten, dies zu vermeiden, sind
- Anzeigen von Zusammenfassungen anstelle vollständiger Inhalte (siehe, eine weitere Ausnahme von einer früheren Regel!), und
- Filtern von Inhalten, sodass Benutzer aus mehreren Feeds für bestimmte Inhaltsarten wählen können. Mit anderen Worten, wenn Sie jeden einzelnen Beitrag (oder eine vollständige Zeitleiste zu einem bestimmten Thema) bereitstellen möchten, sollten Sie einen dedizierten Feed für dieses Thema/diese Kategorie/diesen Tag/was auch immer erstellen.
Der Grund, warum ich so pingelig auf die Größe eines Feeds bin, ist, dass – wie bei Bildern, Skripten und anderen Assets – die Anzahl und Größe von Feeds die Leistung eines Feed-Readers beeinflusst. Je mehr Feeds ein Benutzer abonniert und je mehr Einträge aus diesen Feeds abgerufen werden müssen, desto länger dauert das Aktualisieren und Anzeigen dieser Inhalte.
Feeds verschieben
So wie Websites ihre Domänen ändern können, müssen Sie möglicherweise einen Feed von seiner aktuellen Adresse verschieben. Das ist nicht besonders schwierig, aber es gibt wichtige Dinge zu beachten, bevor Sie einen Umzug vornehmen.
Zum Beispiel ist es eine gute Idee sicherzustellen, dass die Einträge Ihres Feeds eine globale eindeutige Kennung (GUID) haben. Dies entspricht dem guid in RSS und dem id in Atom und JSON. Die GUID verhindert, dass Feed-Reader doppelte Einträge abrufen. Dies ist umso wichtiger (und herausfordernder), wenn Sie mit einer statischen Website arbeiten.
Obwohl es verlockend sein mag, den Permalink des Eintrags als Kennung zu verwenden, denken Sie daran, dass sich diese ändern können. Um eine GUID zu erstellen, empfehle ich, eine Tag URI zu verwenden. Eine Tag URI besteht aus
- einer Autorität (d. h. der Domain der Website)
- einem Datum (das einen Zeitpunkt angibt, zu dem die Tagging-Entität die mit dem Feed verbundene Autoritätsbezeichnung kontrollierte)
- die spezifische URL zum Abrufen
- ein Fragment (das eine Unterressource oder ein Zeitstempel sein kann)
tag:<authority>,<YYYY-MM-DD>:<specific>#<fragment>Der <spezifische>-Teil könnte so etwas wie der relative Teil der URL Ihrer Website-Homepage sein (d. h. /), und das Fragment kann der veröffentlichte Zeitstempel des Inhalts sein. Zum Beispiel könnte ein Beitrag hier auf CSS Tricks eine Tag URI haben, die so aussieht
tag:css-tricks.com,2021-16-11:/#1637082038781Auf diese Weise stellt das Autoritätsdatum sicher, dass die Domain selbst dann nicht verloren geht, wenn sie den Besitzer wechselt. Außerdem kann sie in einem Static Site Generator verwaltet werden, da Sie Domainänderungen im Laufe der Zeit verfolgen können.
Der wichtigste Grund, warum ich das Tag URI-Schema empfehle, ist, dass Atom die id eines Feeds im URL-Format erfordert. Auch wenn RSS und JSON nicht dieselbe Einschränkung haben, funktioniert das Tag URI-Schema auch für sie, was bedeutet, dass wir volle Unterstützung haben.
Und mit einer robusten ID kann ein Feed sicher verschoben werden, ohne dass Feed-Reader doppelte Einträge abrufen. Um den Feed selbst zu verschieben, richten Sie eine 301-Weiterleitung zur neuen Adresse ein und fertig.
Sie könnten auf eine Technik namens XML-Weiterleitung stoßen, bei der eine Datei mit dem neuen Speicherort des Feeds am alten Speicherort platziert wird. So gut das auch für Zeiten funktionieren würde, in denen Sie keine HTTP-Codes manipulieren können, konnte ich keine Feed-Reader finden, die dies implementieren.
Validierung eines Feeds
Feeds müssen, genau wie HTML, gültig sein, um richtig zu funktionieren. Der Vorteil eines validierten Feeds ist, dass Sie wissen, dass Ihr Code fehlerfrei ist und die Einträge ordnungsgemäß von Ihrer Website zu den Feed-Readern fließen.
Der Feed-Validierungsdienst des W3C ist eine Option für RSS- und Atom-Feeds. Sie geben die URL des Feeds an oder fügen den eigentlichen Code des Feeds ein, und Sie erhalten einen vollständigen Bericht, der zeigt, ob Sie alle Best Practices einhalten. Sie werden wahrscheinlich Warnungen erhalten. Das passiert. Die meisten Warnungen sind nur ein Hinweis und haben möglicherweise keine Auswirkungen auf den Feed.
Dennoch gibt es zwei Dinge, die immer angegangen werden sollten, wenn ein Feed validiert wird
itemsollte einguid-Element enthalten: Die eindeutige Kennung, wie wir gesehen haben, verhindert, dass ein Feed-Reader denselben Eintrag zweimal anzeigt, wenn ein Feed verschoben wird.elementsollte absolute URL-Referenzen enthalten — diese sind für Reader schwer aufzulösen, vermeiden Sie daher nach Möglichkeit relative URLs.
Was ist mit JSON? Um einen JSON-Feed zu validieren, versuchen Sie entweder, validator.jsonfeed.org zu verwenden oder gegen das JSON Feed Schema mit einem beliebigen JSON-Schema-Validator zu prüfen.
Zugriff auf einen Feed verwalten oder einschränken
Sie wissen, wie Sie einen kostenpflichtigen Podcast abonnieren können und erhalten Zugang zu einer speziellen Feed-URL, die alle "Premium"-Inhalte enthält, auf die Sie mit Ihrem Abonnement zugreifen? Nun, das liegt daran, dass wir kontrollieren können, wer Zugriff auf einen bestimmten Feed hat, während andere von den Inhalten ausgeschlossen werden.
Es gibt zwei Techniken zur Verwaltung des Zugriffs auf einen Feed
- HTTP-Basisauthentifizierung erfordert einen Benutzernamen und ein Passwort, die entweder vom Benutzer eingegeben werden oder in der Feed-URL selbst enthalten sind, z. B.
https://username:[email protected]. - Bereitstellung eines Tokens als Abfrageparameter, z. B.
http://domain.com/path?token=xyz
Solange die URL HTTPS ist, haben sie die gleiche Sicherheit, da die URL-Pfade und Passwörter verschlüsselt sind. Die Handhabung der Authentifizierung auf dem Server ist ein ganz anderes Thema, obwohl es hier auf CSS-Tricks einige Artikel darüber gibt.
Treten Sie dem RSS-Club bei!
OK, die erste Regel des RSS-Clubs ist
Sprich nicht darüber. Lass die Leute es finden. Mach es lohnenswert.
Aber ich werde darüber sprechen, weil Feeds, die Teil des RSS-Clubs sind, hervorragende Beispiele für maßgeschneiderte Feeds sind. Das liegt daran, dass die Feed-Einträge nur in diesen Feeds verfügbar sind. Mit anderen Worten, die Blogbeiträge werden veröffentlicht, aber nie auf der eigentlichen Website angezeigt – sie sind nur per Feed zugänglich.
Dave Rupert hat den Club vor einigen Jahren gegründet und es ist eine großartige Möglichkeit, RSS zu einem erstklassigen Bürger für den Konsum von Inhalten innerhalb einer kleinen Community zu machen.
Die Teilnahme am Club bedeutet, einen dedizierten Feed für Beiträge zu haben, die nur in diesem Feed verfügbar sind. In WordPress könnten Sie zum Beispiel eine neue Kategorie "RSS Club" erstellen und diese aus der Hauptbeitragsabfrage herausfiltern. Auf diese Weise können Sie entweder einen Feed nur für diese Kategorie bereitstellen oder den vollständigen Feed, der weiterhin Beiträge in dieser Kategorie enthält.
(Entschuldigung, dass ich das Geheimnis verraten habe, Dave!)
Web-Feeds jenseits von Inhalten
RSS kann für mehr als nur Blogbeiträge oder Artikel verwendet werden. Zum Beispiel hat GitHub Atom-Feeds für Issues, Commits, Pull Requests und Releases.
Sie können auch verwendet werden, um Updates bereitzustellen. Angenommen, Sie möchten einen Feed, der Sie benachrichtigt, wenn es Änderungen an Ihrer Website gibt. Das ist eine großartige Idee, oder? Es ist immer schön zu wissen, was passiert, besonders wenn mehr als ein Koch in der Küche steht.
Sie könnten ein System entwickeln, das Ihren Feed regelmäßig auf Änderungen abfragt und dann einen neuen Feed-Eintrag auslöst, aber das erfordert viele Ressourcen. Eine andere Idee ist die Implementierung von Webhooks, die Ihnen sagen, wo Sie nach Änderungen suchen sollen. Aber die Verwaltung und das Versenden von Benachrichtigungen kann mühsam sein, besonders wenn Sie nur Inhalte überwachen möchten.
Ich denke, es lohnt sich, sich WebSub anzusehen. Sie als Publisher informieren einen Hub darüber, dass die Website geändert wurde, und der Hub benachrichtigt jedes System, das die Web-Feeds der Website abonniert hat. Sie können Ihren Feed auf einem bestehenden Hub veröffentlichen – wie Googles PubSubHubbub Hub – und dann den Hub in Ihren Feeds angeben. YouTube hat dies implementiert.
Copyright © 2018 World Wide Web Consortium, (MIT, ERCIM, Keio, Beihang).
Beispiele!
Was wäre ein Tutorial wie dieses ohne ein paar gute Beispiele? Schauen wir uns drei reale Beispiele an.
1. RSS-Podcast
Wussten Sie, dass CSS-Tricks einen Podcast für eine laufende Serie über Web-Geschichte hat? Nun, das tut er. Und ja, Sie können ihn über RSS abonnieren.
Podcasts müssen RSS mit den Erweiterungen xmlns:content und xmlns:itunes verwenden, die benötigt werden, um Metadaten über den Podcast und seine Episoden bereitzustellen. Die Audiodatei für jede Episode ist in einer „Enclosure“ zusammen mit ihrem MIME-Typ und ihrer Größe angegeben. RSS ist auf eine Enclosure beschränkt, aber sowohl Atom als auch JSON unterstützen mehrere Enclosures.
Hier ist der Feed. Beachten Sie die iTunes-spezifischen Tags sowie andere Informationen, die zusätzlichen Kontext bieten.
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
<channel>
<atom:link href="https://adactio.s3.amazonaws.com/audio/narration/web_history/podcast.xml" rel="self" type="application/rss+xml" />
<title>Web History</title>
<link>https://css-tricks.de/category/history/</link>
<language>en</language>
<copyright>2020</copyright>
<description>Written by Jay Hoffmann and narrated by Jeremy Keith.</description>
<image>
<url>https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg</url>
<title>Web History</title>
<link>https://css-tricks.de/category/history/</link>
</image>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>The history of the web.</itunes:summary>
<itunes:explicit>no</itunes:explicit>
<itunes:type>episodic</itunes:type>
<itunes:owner>
<itunes:name>Jeremy Keith</itunes:name>
<itunes:email>[email protected]</itunes:email>
</itunes:owner>
<itunes:image href="https://adactio.s3.amazonaws.com/audio/narration/web_history/WebHistoryPodcast.jpg"/>
<itunes:category text="Technology"></itunes:category>
<item>
<title>Chapter 10: Browser Wars</title>
<description>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</description>
<pubDate>Mon, 8 Nov 2021 12:00:00 -0000</pubDate>
<link>https://css-tricks.de/chapter-10-browser-wars/</link>
<itunes:title>Chapter 10: Browser Wars</itunes:title>
<itunes:episode>10</itunes:episode>
<itunes:episodeType>full</itunes:episodeType>
<itunes:author>Jay Hoffman</itunes:author>
<itunes:summary>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</itunes:summary>
<content:encoded>
<![CDATA[
<p>In June of 1995, representatives from Microsoft arrived at the Netscape offices. The stated goal was to find ways to work together—Netscape as the single dominant force in the browser market and Microsoft as a tech giant just beginning to consider the implications of the Internet. Both groups, however, were suspicious of ulterior motives.</p>
]]>
</content:encoded>
<itunes:duration>00:40:40</itunes:duration>
<guid>https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3</guid>
<enclosure url="https://adactio.s3.amazonaws.com/audio/narration/web_history/Chapter_10_Browser_Wars.mp3" length="19608877" type="audio/mpeg"/>
</item>
</channel>
</rss>2. RSS für Beiträge
Schauen wir uns noch einmal CSS-Tricks an, diesmal als Beispiel dafür, wie ein ziemlich standardmäßiger RSS-Feed von Blog-Posts aussieht.
Der Code für diesen speziellen RSS-Feed ist etwas ausführlicher als bei einem typischen Feed, was an den mehreren Erweiterungen liegt, die dem <rss>-Tag hinzugefügt wurden. Einige davon sind nicht erreichbar, aber es gibt einige, die andere Dinge behandeln, wie z. B. xmlns:wfw für Kommentare, xmlns:dc für zusätzliche Metadaten und xmlns:sy für Informationen zur Aktualisierungshäufigkeit des Feeds.
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>CSS-Tricks</title>
<atom:link href="https://css-tricks.de/feed/" rel="self" type="application/rss+xml" />
<link>https://css-tricks.de</link>
<description>Tips, Tricks, and Techniques on using Cascading Style Sheets.</description>
<lastBuildDate>Fri, 19 Nov 2021 15:13:49 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>https://wordpress.org/?v=5.8.2</generator>
<image>
<url>https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1</url>
<title>CSS-Tricks</title>
<link>https://css-tricks.de</link>
<width>32</width>
<height>32</height>
</image>
<site xmlns="com-wordpress:feed-additions:1">45537868</site>
<item>
<title>Parallax Powered by CSS Custom Properties</title>
<link>https://css-tricks.de/parallax-powered-by-css-custom-properties/</link>
<comments>https://css-tricks.de/parallax-powered-by-css-custom-properties/#respond</comments>
<dc:creator>
<![CDATA[Jhey Tompkins]]>
</dc:creator>
<pubDate>Fri, 19 Nov 2021 15:13:46 +0000</pubDate>
<category>
<![CDATA[Article]]>
</category>
<category>
<![CDATA[animation]]>
</category>
<category>
<![CDATA[custom properties]]>
</category>
<category>
<![CDATA[GSAP]]>
</category>
<guid isPermaLink="false">https://css-tricks.de/?p=357192</guid>
<description>
<![CDATA[
]]>
</content:encoded>
<wfw:commentRss>https://css-tricks.de/parallax-powered-by-css-custom-properties/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
<post-id xmlns="com-wordpress:feed-additions:1">357192</post-id>
</item>
</channel>
</rss>3. JSON-Feed
Das ist eigentlich mein persönlicher Feed und ich verwende JSON dafür. Er ist ziemlich spartanisch und weniger überladen als die anderen Beispiele, da es, soweit ich weiß, keine JSON-Erweiterungen wie die RSS-Erweiterungen gibt, die wir in Beispiel 2 gesehen haben.
Ich finde, dass JSON viel einfacher zu lesen ist und alles, was benötigt wird, ist ein Objekt mit den Feed-Daten, anstatt die gesamte Vorlage zu schreiben.
{
"author": {
"name": "Farai Gandiya"
},
"feed_url": "https://codelab.farai.xyz/feed.json",
"home_page_url": "https://codelab.farai.xyz/",
"icon": "https://codelab.farai.xyz/fcl-logo.png",
"items": [
{
"content_html": "...",
"date_modified": "2021-11-13T05:26:07+02:00",
"date_published": "2021-11-13T05:26:07+02:00",
"id": "https://codelab.farai.xyz/1636773967",
"summary": "...",
"title": "Don't be afraid of the Big Long Page by Amy Hupe, content designer.",
"url": "https://codelab.farai.xyz/links/long-content-ok/"
}
]
}Web-Feed-Implementierungen auf CMS und statischen Website-Generatoren
Viele CMS und statische Website-Generatoren unterstützen Web-Feeds, obwohl es normalerweise RSS ist, da es die breiteste Unterstützung hat. Hier sind einige CMS, die Web-Feeds unterstützen.
- WordPress (Atom und RSS)
- Yoast SEO ermöglicht es Ihnen, Inhalte vor und nach den Einträgen jedes Feeds zu ändern.
- WordPress JSON-Feed-Plugin
- Ghost (modifizierbares RSS)
- Shopify (RSS)
- Squarespace (RSS für Beiträge und Podcasts)
- Wix (RSS)
Und hier sind einige Ressourcen zum Hinzufügen von Web-Feeds (wieder meist RSS) zu verschiedenen statischen Website-Generatoren.
Zusammenfassung
Und da haben Sie es! Dies ist meiner Meinung nach fast alles, was Sie bei der Implementierung eines Web-Feeds berücksichtigen müssen. Wir haben drei verschiedene Formate (RSS, Atom, JSON) betrachtet, Best Practices für die Erstellung eines benutzerfreundlichen Feed-Leseerlebnisses behandelt, das Validieren eines Feeds durchlaufen, die Möglichkeit der Authentifizierung von Feeds abgedeckt, drei reale Beispiele von Feeds in freier Wildbahn angesehen und einige Implementierungen für verschiedene Technologien bereitgestellt.
(Oh, und da war diese Sache, dass die erste Regel der Sache ist, nicht über die Sache zu reden.)
Ich hoffe, diese Richtlinien befähigen Sie, robuste Web-Feeds zu erstellen. Wenn Sie Fragen zur Implementierung eines Web-Feeds haben oder einfach nur Ihren RSS-Feed teilen möchten, hinterlassen Sie bitte einen Kommentar!
Seit Google Reader geschlossen wurde, benutze ich Feedly für RSS. Ich habe immer zwei Tabs im Browser geöffnet: Gmail und Feedly. Von Web-Technologie über Motorräder und Wohnmobile bis hin zu Web-Comics – ich verlasse mich vollständig auf RSS!
Ich lese CSS-Tricks schon seit Jahren auf diese Weise.
Ja, ich liebe RSS immer noch und hoffe, dass es nicht verschwindet. Was das Aufholen mit einer Vielzahl von verschiedenen Websites angeht, auf saubere, umfassende (und vor allem zeiteffiziente) Weise, ist es unschlagbar. Es funktioniert meiner Meinung nach, wie der Benutzer es möchte.
So halte ich mich über CSS-Tricks auf dem Laufenden, nebenbei bemerkt.
Ich verfolge so viele Programmier-Blogs. Hier ist mein OPML-Export, wenn Sie einige neue Feeds abonnieren möchten.
Sehr umfassend. Sie müssen viel recherchiert haben. Tolle Arbeit.
Hier ist ein Vorschlag für Ihre Zusammenfassung der Web-Feed-Unterstützung von CMS und SSGs. Zola kann RSS- und Atom-Feeds sofort generieren.
Außerdem würde ich gerne wissen, welche Feed-Reader Sie auf den Bildern haben. Ich kann keinen finden, den ich mag.
Oh, ich hatte Zola vergessen.
Der Feed-Reader, den ich für die meisten Screenshots verwendet habe, ist NetNewsWire unter iOS.
Ich benutze RSS schon seit Ewigkeiten. Derzeit benutze ich Inoreader, was Funktionen und Preis angeht, ist es Feedly weit voraus. Ich bin über einen RSS-Post hierher gekommen :)
Danke für diesen Artikel!
Ich habe einen RSS-Feed für meinen Newsletter implementiert und wir haben jetzt etwa 160 Ausgaben. Das ist eine ziemlich dumme Frage, aber ist der RSS-Feed die gesamte Bibliothek / das Inhaltsverzeichnis ALLER Ausgaben? Sind es normalerweise die neuesten 10? Ich habe alle Ausgaben hinzugefügt und er ist wirklich lang.
Ist das, was man tun soll, oder mache ich es komplett falsch?
Ich würde nicht jede Ausgabe in einen Feed packen, da es redundant wird. Ich würde empfehlen, separate Feeds zu erstellen, einen mit den neuesten Beiträgen und einen anderen mit allen.
Ja, sehr guter Artikel!
Ich glaube nicht, dass das eine gute Ausrede für einen reinen Zusammenfassungs-Feed ist. Die meisten reinen Zusammenfassungs-Feeds sind nur der erste Teil des Inhalts im Feed. Allerdings können die meisten Feed-Reader bereits so konfiguriert werden, dass sie nur den ersten Teil des Inhalts anzeigen.
Eine andere Option ist, dass Sie einen reinen Zusammenfassungs-Feed *zusätzlich* zu Ihrem Volltext-Feed bereitstellen könnten.
Ja, generell würde ich mich nicht für einen reinen Zusammenfassungs-Feed entscheiden. Ich habe nur darüber nachgedacht, wenn Sie viele lange Beiträge häufig veröffentlichen.
Das ist ein sehr informativer Beitrag, ich bin neu im Bloggen und alles, was ich weiß und benutze, ist RSS.
Danke, dass du ein paar Dinge für mich geklärt hast.
Es gibt eine zusätzliche Möglichkeit, eine Website zu syndizieren, die besser bekannt sein sollte: das h-entry / h-feed und Microformat.
Der Website-Produzent fügt die h-entry und h-feed Micrformate in den HTML-Code des Inhalts selbst ein, zusammen mit p-name, p-author usw. Die Aufgabe des Feed-Readers besteht dann darin, die Inhaltsseite zu scrapen und nach diesen Klassen zu suchen – es gibt keine alternative Feed-URL, die der Website-Produzent synchron halten muss, was meiner Meinung nach ein besserer Weg ist.
Die Verwendung des HTML-Codes selbst für die Syndizierung anstelle einer zusätzlichen Datei scheint heutzutage besonders wichtig zu sein, da die neueren Javascript-gesteuerten Web-Systeme XML nicht mehr so einfach und flexibel ausgeben können wie ältere PHP-Systeme. Sie erwähnen zum Beispiel Nuxt auf Ihrer Liste von Website-Generatoren, aber als Nuxt-Benutzer weiß ich, dass Feeds ein Add-on-Modul sind und individuell in der Datei nuxt.config.js eingerichtet werden, keine First-Class-Funktionalität.
Meiner Meinung nach sind diese Microformate ein wichtiger Webstandard.
Das sieht interessant aus und ist eine Überprüfung wert. Im Moment sieht es irgendwie wie Schema aus.
Ich bin eigentlich ein Neuling in der RSS-Szene! Ich habe Leute im Obsidian Discord Server darüber sprechen gehört und beschlossen, es auszuprobieren. Ich liebe es absolut! Ich habe NetNewsWire, Newsblur und Feedbin ausprobiert. Ich denke, Feedbin ist definitiv mein Favorit, aber ich benutze auch die anderen. Ich wünschte, ich könnte alle Elemente in meinen Feeds in NetNewsWire und Newsblur so einfach exportieren wie in Feedbin, da einige der Feeds, die ich abonniere, aktiver sind als andere (obwohl ich vor ein paar Stunden beschlossen habe, einen der extrem aktiven in Newsblur stummzuschalten). Das ist für mich die größte Schwäche in Newsblur und NetNewsWire.
NetNewsWire hat eine Exportfunktion in den Einstellungen.
Sie vergessen GRAV CMS. Es macht alle 3 sehr gut und automatisch für alle Websites, die Inhaltselemente haben.