Working With Web Feeds: It's More Than RSS-CSS Tutorial-php.cn

Working With Web Feeds: It’s More Than RSS

With Google Chrome exploring website "following" features and growing frustration over social media's algorithmic feed limitations on creator reach, RSS feeds are experiencing a resurgence. This trend is expected to continue into 2022 and beyond.

This article is supported by Frontend Masters, CSS-Tricks' official learning partner.

Need front-end development skills?

Frontend Masters offers comprehensive courses covering essential front-end technologies. Aspiring full-stack developers will also find valuable resources here:

Take the Courses Rumors of RSS's demise are greatly exaggerated. Its widespread use in podcasting demonstrates its continued relevance. Whether you're a seasoned RSS user needing a refresher or a newcomer, understanding best practices for creating and managing feeds is crucial. This article guides you through various feed types, implementation techniques, and strategies for maximizing feed content.

RSS, Atom, and JSON Feeds: A Comparison

RSS is just one type of syndicated web feed. The most prevalent formats include:

RSS
Atom
JSON Feed

While "RSS" is a commonly used search term, this article uses "web feeds" unless referring to a specific format.

Atom, RSS, and JSON feeds serve the same purpose, but with key differences:

Atom and RSS are XML-based, while JSON Feed uses JSON.
All formats allow extensions. JSON uses underscore-prefixed keys, while Atom and RSS use namespace declarations (e.g., the iTunes podcast namespace with <itunes:></itunes:> tags).
JSON Feed, being newer, may have less widespread support than Atom or RSS. However, RSS is essential for podcasts.
Atom uniquely requires a unique identifier for each feed, in addition to each entry/item.
All support HTML markup, but handle it differently (JSON uses content_html with JSON-escaped HTML; Atom uses the content tag with type=html and XML-escaped HTML; RSS uses <description></description> or content extensions with either XML-escaped or unescaped HTML).

Beyond these differences, variations are minor. File size isn't a significant factor due to compression. Unless a specific format is required (like for podcasts), offering multiple formats is beneficial, with RSS and Atom enjoying the broadest support.

Creating Effective Web Feeds: Best Practices

Optimizing your feeds involves several key strategies:

1. Ensuring Discoverability

A hidden feed is useless. Make your feed easily discoverable by including links within the of your site. This allows feed readers to identify and access your content. Here's an example incorporating all three formats:

  <link href="https://codelab.farai.xyz/index.rss.xml" rel="alternate" title="Farai's Codelab's RSS Feed" type="application/rss xml"><link href="https://codelab.farai.xyz/index.feed.json" rel="alternate" title="Farai's Codelab's JSON Feed" type="application/feed json"><link href="https://codelab.farai.xyz/index.atom.xml" rel="alternate" title="Farai's Codelab's ATOM Feed" type="application/atom xml">

Copy after login

Using all three is acceptable. While some readers might only recognize the first link, rel="alternate" and the correct MIME type are essential. Adding a title is also recommended. Further enhance discoverability by prominently displaying direct links to your feeds on your website. CSS Tricks, for example, provides an RSS link in its footer. Feed readers can often detect these links even outside the . The feed's name is less crucial than its accessibility.

2. Leveraging HTTP Features

Optimize your feeds using standard web technologies:

Compression: Use gzip, Brotli, or similar to reduce file size and download times. Most servers handle this automatically.
Caching: Implement ETags or If-Modified-Since to allow clients to cache feeds and avoid unnecessary downloads. Server-side configuration often manages this.
CORS: Enable permissive CORS (e.g., Access-Control-Allow-Origin: *) to prevent client-side blocking. While security implications should be considered, it's unlikely to be a major concern for smaller sites.

3. Delivering Full Content

Prioritize providing the complete content of each post/entry/item in your feed, rather than just summaries. Many users prefer the readability of feed readers. While concerns about content scraping exist, it's no more difficult to scrape from a webpage than a feed. Including static ads directly within your feed content remains possible. Some readers can also parse associated web pages. However, summaries are acceptable for feeds with long-form content or rich media that requires specific viewing methods (like podcast show notes). If using summaries, include an image, key points, and a link to the full content.

4. Optimizing for Readability

Design your feed content for optimal readability outside a web browser, where JavaScript and CSS are limited. Sara Soueidan's tips on this are valuable. Focus on providing robust fallback experiences, especially for embedded elements. Many embeds offer fallback content (like Twitter and CodePen), but others may not. Some embeds (like Vimeo videos) may only work on specific domains. Provide alternatives like images or links. Consider how different readers handle content and provide appropriate fallbacks.

5. Using Absolute URLs

Resolve relative URLs for images and links by using absolute URLs for every href and src attribute within an entry's content. This avoids issues with relative URLs and subdirectories. While this can be challenging, especially with statically-generated sites, it's the most robust solution. One approach is to make relative URLs absolute during the build process. Another is to configure your static site generator to render absolute URLs directly in Markdown. Footnotes are an exception; some readers handle relative jump links within footnotes.

6. Handling Ads in Feeds

Since JavaScript support is limited in feed readers, ads must be integrated directly into your content, not dynamically injected.

7. Content Management and Multiple Feeds

Avoid overwhelming users with excessively long feeds, especially for frequently updated sites. Consider limiting the number of past entries included, using summaries instead of full content, or creating multiple feeds for different content categories or topics.

8. Moving Feeds

When moving a feed, ensure entries have globally unique identifiers (GUIDs) using a tag URI scheme (e.g., tag:<authority>,<yyyy-mm-dd>:<specific>#<fragment></fragment></specific></yyyy-mm-dd></authority>). This prevents duplicate entries in feed readers. Use a 301 redirect for the feed itself.

9. Feed Validation

Validate your feeds (using W3C's service for RSS and Atom, or validator.jsonfeed.org for JSON) to ensure correctness and identify potential issues. Address any errors related to GUIDs and absolute URLs.

10. Access Control

Manage feed access using HTTP basic authentication (username/password) or tokens as query parameters. Both offer similar security over HTTPS.

11. The RSS Club

The RSS Club promotes the creation of exclusive feeds where content is only available via the feed, not the website.

12. Web Feeds Beyond Content

Web feeds can be used for various purposes beyond blog posts, including updates, notifications, and monitoring changes on a website. WebSub can help manage notifications efficiently.

13. Examples

The article provides examples of RSS podcast feeds, RSS blog post feeds, and JSON feeds.

14. CMS and Static Site Generator Implementations

The article lists CMSs (WordPress, Ghost, Shopify, Squarespace, Wix) and static site generators (Eleventy, Hugo, Next.js, Nuxt.js, Jekyll, Astro, Gatsby, Zola) that support web feeds.

The article concludes by summarizing the key considerations for implementing effective web feeds. It encourages readers to share their feeds and questions in the comments.

The above is the detailed content of Working With Web Feeds: It's More Than RSS. For more information, please follow other related articles on the PHP Chinese website!