zhen.codes

#

Technical SEO and RSS Integration for My Astro Blog

Friday, May 10, 2024

In this post, I will walk you through setting up technical SEO and RSS integration for my Astro blog. We will cover favicon generation, image handling with Unsplash, and validating your RSS feed.

Technical SEO

First, I go to https://favicon.io to obtain production-ready files, including the favicon.ico, high-resolution PNGs, and the site.webmanifest file, which enhances the experience on Android devices and PWAs.

Next, I use the popular Astro community tool, astro-seo, to configure SEO settings for each page. These settings are included in the webpage’s <head> after static building, helping to optimize the site’s appearance on search engines and social media platforms, thereby improving user experience and increasing site traffic.

Here’s an example of my SEO configuration:

...
<SEO
    title="zhen.codes"
    description="Ideas and fun time of Zhen"
    canonical="https://zhen.codes"
    openGraph={{
      basic: {
        title: "zhen.codes",
        type: "website",
        image: imageUrl,
        url: "https://zhen.codes",
      },
      optional: {
        description: "Ideas and fun time of Zhen",
        localeAlternate: ["zh_CN"],
      },
    }}
    twitter={{
      card: "summary_large_image",
      site: "@jeffzholy",
      creator: "@jeffzholy",
      title: "zhen.codes",
      description: "Ideas and fun time of Zhen",
      image: imageUrl,
    }}
    slot="head"
  />
...

All images in my configuration are sourced from my drone photos I uploaded to Unsplash. I’ll explain how to use images on Unsplash in the next section.

Image Handling

I use images from my drone photos uploaded to Unsplash. Unsplash provides a rich API that makes it easy to specify image dimensions, quality, format, and many parameters directly in the URL. This is convenient for embedding images in my blog.

I recommend Unsplash to other bloggers for its vast collection of high-quality, copyright-free images. By featuring one of my photos at the beginning of each blog post, I enhance the visual appeal, improve user experience, and showcase my photography. This benefits my website and helps promote my work when shared on social media.

To use the Unsplash API, I inspect the element to get the image’s ID. For instance, the image ID for this article is 1713953028201-abb4ae519cae. I then adjust the parameters based on where the image is displayed. For the article, I need the highest quality, so I set the quality to 100% and leave the dimension info as default. For RSS feeds, I specify a width of only 500 pixels.

RSS

As a blogger, I hope that more people can subscribe to my blog. Therefore, I have integrated RSS functionality into my website.

The official @astrojs/rss provided by Astro is very easy to integrate. To ensure a better reading experience in RSS readers, I need to include images from the articles in the RSS feed. It is necessary to provide the precise size of each image because @astrojs/rss requires image dimensions when configuring images.

Here’s an example of my rss.xml.ts:

export async function GET() {
  const posts = await getCollection("posts");

  const items = [];
  for (const { data, slug, body } of posts) {
    items.push({
      title: data.title,
      pubDate: data.pubDate,
      description: data.description,
      categories: data.tags,
      content: sanitizeHtml(parser.render(body), {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat([
          "img",
          "p",
          "br",
          "strong",
          "em",
        ]),
      }),
      link: `/posts/${slug}/`,
      enclosure: {
        length: await getRssImageSize(data.image.imageId),
        url: getRssUrl(data.image.imageId),
        type: "image/jpeg",
      },
    });
  }

  return rss({
    title: "zhen.codes",
    description: "Ideas and fun time of Zhen",
    site: "https://zhen.codes",
    stylesheet: "/rss/styles.xsl",
    items,
    customData: `<language>en-us</language>`,
  });
}

After integrating and deploying the RSS feed, you can validate it using the W3C Feed Validation Service, or directly subscribe using common readers such as Feedly or Inoreader to see the effect. Now, you can go to my RSS page and subscribe to my blog 😉!