Home Blog Talks

Effortless SEO for Astro with @zfben/astro-head


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";

      title="Hello world"

Supported Props

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
descriptiondescription, og:description, twitter:descriptionstring
imageimage, og:image, twitter:imagestring
authorauthor, article:authorstring
twittertwitter:site, twitter:creatorstring, must be started with @
alternatesalternate, og:locale:alternatelang and path list
Back to all posts