Home Blog Talks

Effortless SEO for Astro with @zfben/astro-head

2024-05-16

Managing SEO for your Astro website just got easier with @zfben/astro-head. This package simplifies the process of adding essential meta tags and Open Graph/Twitter card meta data to your Astro components, boosting your website’s search engine visibility.

Key Features

Getting Started

  1. Installation: Install the package using npm: npm install @zfben/astro-head
  2. Configuration: Ensure you have a site property defined within your astro.config.js file. This provides the base URL for your website.
  3. Import and Usage: Import the Head component from the package and use it within your Astro components:
---
import { Head } from "@zfben/astro-head";
---

<html>
  <head>
    <Head
      title="Hello world"
      path="/"
    />
  </head>
</html>

Supported Props

PropOutputFormat
titletitle, og:title, twitter:titlestring, required
pathcanonical, url, og:url, twitter:urlstring, required, must be started with /
typeog:typestring, default is website
charsetcharsetstring, default is utf-8
langog:localestring
descriptiondescription, og:description, twitter:descriptionstring
imageimage, og:image, twitter:imagestring
siteNameog:site_namestring
authorauthor, article:authorstring
twittertwitter:site, twitter:creatorstring, must be started with @
alternatesalternate, og:locale:alternatelang and path list
Back to all posts