nuxt-seo-kit v1.3.13

Background

Configuring SEO for Nuxt is a lot of work, it requires installing many modules, configuring them all separately and then figuring out all the meta tags.

What if there was an easier way?

Introducing Nuxt SEO Kit, the all-in-one SEO module for Nuxt v3. Combining all of my SEO modules and best practices into one, it's the easiest and quickest way to improve your apps SEO.

Modules

• 📖 nuxt-simple-sitemap - Sitemap.xml Support
• 🤖 nuxt-simple-robots - Manage site crawling
• 🔎 nuxt-schema-org - Generate Schema.org JSON-LD for SEO
• △ nuxt-unhead - Experimental SEO meta features
• 🖼️ nuxt-og-image - Generate dynamic social share images
• ✅ nuxt-link-checker - Check for broken links

Features

🤖 Search engine visibility solved

• Get the right content crawled with robot rules (robots.txt, HTTP header, meta tags)
• Let search engines find your content (sitemap.xml)
• Structured data for rich search results (Schema.org)
• Automatic canonical URLs

🔗 Enhanced Social Sharing

• Generate dynamic or static screen social share images
• Automatic opengraph and twitter meta tags

😌 Find issues before they become a problem

• Trailing Slashes automatically handled correctly
• Discover broken links

✨ And much more

• Use route rules to manage custom config
• Use definePageMeta for title, description and image
• <Breadcrumbs /> - Generate Schema.org compliant breadcrumbs with zero config
• More coming soon!

Install

⚠️ This module is in early access, please check generated markup is correct.

npm install --save-dev nuxt-seo-kit

# Using yarn
yarn add --dev nuxt-seo-kit

Register Layer

nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    'nuxt-seo-kit'
  ]
})

Usage

1. Define Config

For configuration to be accessibility to both the Nuxt App, modules and server, config should be provided in the runtime config.

This also allows you to easily override config for different environments.

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      siteUrl: 'https://harlanzw.com/',
      siteName: 'Harlan Wilton',
      siteDescription: 'Open source developer, contributing to the Vue, Nuxt, and Vite ecosystems.',
      language: 'en-AU',
      titleSeparator: '·',
    }
  },
})

2. Add Components

SeoKit

To make the most of Nuxt SEO Kit, you should use the SeoKit component somewhere in your app layout.

This component will set the default meta tags for your app. It's important to have this run before any page specific meta tags are set.

app.vue

<template>
  <div>
    <SeoKit />
    <NuxtPage />
  </div>
</template>

OgImage / OgImageScreenshot (optional)

If you want to use the dynamic og image feature, you should add the OgImage or OgImageScreenshot component to your app layout.

<template>
  <div>
    <SeoKit />
    <!-- Generates screenshots for every page by default -->
    <OgImageScreenshot />
    <NuxtPage />
  </div>
</template>

Done! 🥳

You're all set up.

Next steps: 1. Choose a Schema.org identity 2. Use useHead or useSeoMeta to set meta tags as needed 3. Scan your site with Unlighthouse 4. Read the guides below

Guide

Enabling Trailing Slash

Nuxt SEO Kit allows you to enable global trailing slashes using the runtime config.

This will automatically add trailing slashes to your sitemap and add it as canonical URL.

Note: You will need to still manually write your <NuxtLink> with trailing slashes.

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      trailingSlash: true,
    }
  },
})

Using .env

It can be useful to change the host name based on which environment you have the nuxt App running on.

You can do this with an .env file and the following keys.

NUXT_PUBLIC_SITE_URL=https://harlanzw.com/
NUXT_PUBLIC_SITE_NAME=Harlan Wilton
NUXT_INDEXABLE=true

Disabling site indexing

By default, Nuxt SEO Kit will allow search engines to index your site in production environments.

If you want to disable this, you can set indexable to false in your config.

export default defineNuxtConfig({
  runtimeConfig: {
    indexable: false
  },
})

Alternatively, you can set the NUXT_INDEXABLE environment variable.

Using the Breadcrumbs component

The Breadcrumbs component is a Schema.org compliant breadcrumbs component.

It will automatically infer the routes and labels from your Nuxt router.

<template>
  <Breadcrumbs>
    <template #breadcrumb="{ to, title }">
      <NuxtLink :to="to">
        {{ title }}
      </NuxtLink>
    </template>
  </Breadcrumbs>
</template>

Using definePageMeta

Now you can use the definePageMeta function to set page specific meta tags.

<script lang="ts" setup>
definePageMeta({
  title: 'Home',
  description: 'Welcome to my website',
  image: '/images/home.jpg',
})
</script>

Live Examples

• https://github.com/harlan-zw/harlanzw.com
• https://github.com/unjs/unhead/tree/main/docs
• https://github.com/harlan-zw/unlighthouse/tree/main/docs
• https://github.com/harlan-zw/unhead-schema-org/tree/main/docs

Sponsors

License

MIT License © 2022-PRESENT Harlan Wilton