îles

Head and Meta Tags 🏷

îles will use site data such as title and description and combine them with page titles—specified in frontmatter—to set reasonable default values for commonly used meta tags.

There are several ways to customize title and meta tags in îles, powered by @unhead/vue.

useHead Composable

useHead can be used within the setup function or <script setup> of any Vue component.

<script setup lang="ts">
import { computed } from 'vue'
  
const { frontmatter } = usePage()
const { title, description, tags, image } = frontmatter

useHead({
  title,
  description,
  meta: [
    // useSeoMeta can be used to better manage meta tags
    { property: 'og:type', content: 'website' },
    { property: 'og:image', content: image },
  ],
  htmlAttrs: { lang: 'en-US' },
  bodyAttrs: { class: 'dark-mode', 'data-theme': 'light' },
  link: [],
  style: [],
  noscript: [],
  // useScript can also be used to load scripts
  script: [],
})
</script>

useHead options support both static values and reactive variables, such as ref, computed, and reactive.

useSeoMeta Composable

useSeoMeta can be used within the setup function or <script setup> of any Vue component.

It lets you define your site's SEO meta as a flat object and helps you avoid common mistakes, such as using name instead of property as well typos with over 100+ meta tags fully typed.

<script setup lang="ts">
import { computed } from 'vue'
  
const { frontmatter } = usePage()
const { title, description, tags, image } = frontmatter

useSeoMeta({
  // Refer to type definition for the full list
  title,
  description,
  author: 'Máximo Mussini',
  charset: 'utf-8',
  viewport: 'width=device-width, initial-scale=1',
  generator: 'Îles v0.10.0-beta.1',
  keywords: tags?.toString(),
  ogTitle: title,
  ogDescription: description,
  ogType: 'website',
  ogImage: image,
  ogImageAlt: title,
})
</script>

useSeoMeta options support both static values and reactive variables, such as ref, computed, and reactive.

Auto-imported APIs and Composables
You don't need to import ref, computed, reactive, usePage, useRoute, definePageComponent, useDocuments, useHead, useSeoMeta, useScript.

<Head> Component

Besides useHead and useSeoMeta, you can also manipulate head tags using the <Head> component:

<template>
  <Head>
    <title>Hello World</title>
    <meta property="author" :content="$site.author">
    <meta property="keywords" :content="$frontmatter.tags">
    <html lang="en-US" class="theme-dark" />
  </Head>
</template>

This is often more intuitive, specially for dynamic values.

App Meta Tags

Finally, you can use head in src/app.ts, which supports the same format as useHead.

import { defineApp } from 'iles'

export default defineApp({
  head: {
    htmlAttrs: { lang: 'en-US' },
    bodyAttrs: { class: 'dark-mode', 'data-theme': 'light' },
  },
})

If you need access to the site or page, you can provide a function instead:

import { defineApp } from 'iles'

export default defineApp({
  head ({ frontmatter, site }) {
    return {
      meta: [
        { property: 'author', content: site.author },
        { property: 'keywords', content: () => frontmatter.tags },
      ]
    }
  },
})

Last Updated:

Documents
Static Assets