Documentation

Getting Started

The Nuxt SEO Template provides a comprehensive solution for managing SEO in your Nuxt.js applications. It centralizes all SEO-related configurations and provides a simple API for setting page metadata.

This template includes support for:

• Standard meta tags
• Open Graph protocol
• Twitter Cards
• JSON-LD structured data
• Sitemaps
• Robots.txt
• Internationalization (i18n)

Installation

To get started with the Nuxt SEO Template, follow these steps:

1. Clone the repository

git clone https://github.com/Marwa-M0/nuxt-seo-template.git

cd nuxt-seo-template

2. Install dependencies

npm install
# or
yarn install

3. Configure environment variables

Copy the .env.example file to .env and update the values according to your needs.

cp .env.example .env

4. Start the development server

npm run dev
# or
yarn dev

Configuration

The SEO configuration is centralized in the app/config/seo.config.ts file. This file exports a configuration object that contains all the SEO-related settings.

Main Configuration Structure

export default {
  site: {
    name: 'Your Site Name',
    url: 'https://example.com',
    description: 'Your site description'
  },
  organization: {
    name: 'Your Organization',
    logo: 'https://example.com/logo.png'
  },
  // Other configurations...
}

Usage

Use the useSeo composable to manage SEO metadata for your pages and components.

Example

<script setup lang="ts">
import { useSeo } from '~/composables/useSeo'

const { setPageMeta } = useSeo()

setPageMeta({
  title: 'Home Page',
  description: 'Welcome to our amazing website!',
  image: '/images/og-image.png',
  type: 'website'
})
</script>

useSeo Composable

The useSeo composable provides the following methods:

• setPageMeta(meta: PageMeta) — Sets the metadata for the current page.
• getSeoConfig() — Returns the global SEO configuration.

PageMeta Interface

interface PageMeta {
  title?: string
  description?: string
  image?: string
  type?: 'website' | 'article' | 'profile' | 'product'
  publishedTime?: string
  modifiedTime?: string
  author?: string
}

Environment Variables

The template uses environment variables to manage certain aspects of SEO configuration. These are typically set in your .env file.

Example .env variables

NUXT_PUBLIC_SITE_NAME=Your Site Name
NUXT_PUBLIC_SITE_URL=https://example.com
NUXT_PUBLIC_SITE_DESCRIPTION=Your site description
NUXT_PUBLIC_ORG_NAME=Your Organization
NUXT_PUBLIC_ORG_LOGO=https://example.com/logo.png

Accessibility and Security Features

The template includes built-in enforcement for important accessibility and security attributes on images and links.

Image Accessibility

All <img> and <NuxtImg> tags are required to have alt and name attributes. Missing attributes will be automatically added with warning messages.

Example with EnforceImg Component

<EnforceImg 
  src="https://dummyjson.com/image/400x200/008080/ffffff" 
  alt="Example image with Hello text" 
  name="hello-image"
  class="rounded-lg shadow-md mx-auto"
/>

External Link Security

All external links automatically receive rel="noopener noreferrer" attributes and are set to open in a new tab with target="_blank".

Example with EnforceLink Component

<EnforceLink 
  href="https://dummyjson.com/image/400x200/008080/ffffff"
  class="text-primary-600 dark:text-primary-400 font-medium hover:underline"
>
  View Example Image Directly
</EnforceLink>

For more details on these features, see the attribute enforcement documentation.

Advanced Usage

JSON-LD Structured Data

The template supports JSON-LD structured data, which can be customized per page.

<script setup lang="ts">
const { setPageMeta } = useSeo()

setPageMeta({
  title: 'Blog Post Title',
  description: 'Blog post description',
  type: 'article',
  author: 'Name Surname',
  publishedTime: '2023-01-01T12:00:00Z',
  modifiedTime: '2023-01-02T12:00:00Z'
})
</script>

Dynamic Schema.org Implementation

You can add custom Schema.org structured data using the DynamicSchema component or the customSchema parameter in setPageMeta.

<!-- Using the component -->
<DynamicSchema :schema="myCustomSchema" />

<!-- Or using the composable -->
setPageMeta({
  title: 'Page Title',
  description: 'Page description',
  customSchema: myCustomSchema
})

see rating schema examples, or check thedynamic schema documentation for more details.

Internationalization (i18n)

The template integrates with Nuxt I18n to generate localized metadata and alternate hreflang tags.