SEO & Head Management

Effuse provides the useHead hook for managing document head elements like title, meta tags, Open Graph, and Twitter Cards.

Basic Usage

Import useHead from @effuse/core and call it in your component's script:

import { define, useHead } from '@effuse/core';

const HomePage = define({
  script: () => {
    useHead({
      title: 'Home - My App',
      description: 'Welcome to my awesome application.',
    });

    return {};
  },
  template: () => (
    <div>
      <h1>Welcome!</h1>
    </div>
  ),
});

API Reference

HeadProps

The useHead function accepts a HeadProps object with the following properties:

OpenGraphProps

TwitterCardProps

MetaTag

Full Example with Social Tags

import { define, useHead } from '@effuse/core';

const BlogPost = define({
  script: ({ props }) => {
    useHead({
      title: 'My Blog Post - Effuse Blog',
      description: 'Learn how to build reactive UIs with Effuse.',
      canonical: 'https://effuse.dev/blog/my-post',
      robots: 'index, follow',
      themeColor: '#10b981',

      og: {
        title: 'My Blog Post',
        description: 'Learn how to build reactive UIs.',
        type: 'article',
        url: 'https://effuse.dev/blog/my-post',
        image: 'https://effuse.dev/og-image.png',
        siteName: 'Effuse',
      },

      twitter: {
        card: 'summary_large_image',
        site: '@effuse',
        title: 'My Blog Post',
        description: 'Learn how to build reactive UIs.',
        image: 'https://effuse.dev/twitter-card.png',
      },
    });

    return {};
  },
  template: () => (
    <article>
      <h1>My Blog Post</h1>
    </article>
  ),
});

Dynamic Titles

For dynamic titles based on reactive state:

import { define, signal, computed, useHead } from '@effuse/core';

const DocsPage = define({
  script: () => {
    const pageTitle = signal('Getting Started');

    useHead({
      title: `${pageTitle.value} - Effuse Docs`,
      description: `Documentation for ${pageTitle.value}.`,
    });

    return { pageTitle };
  },
  template: ({ pageTitle }) => <h1>{pageTitle}</h1>,
});

Best Practices

1. Set title on every page — Each page should have a unique, descriptive title

2. Include site name — Append your site/app name to page titles

3. Keep descriptions concise — Limit descriptions to about 155 characters for search results

4. Call early in script — Call useHead at the top of your script function

5. Use Open Graph — Add OG tags for better social media previews

Next Steps

• Internationalization

• Server APIs And Actions

• Migrating Layer Access