Set Page Headers

Learn how to manage the page title, meta tags, and favicons for SEO and branding.

Overview

Controlling the <head> of your document is crucial for SEO, social sharing, and user experience. JopiJS provides a set of hooks to manage these elements easily from your components.

In this guide, you will learn how to:

Set the page title.
Add meta tags (description, viewport, Open Graph).
Configure the favicon.
Inject custom CSS or modify the <body> tag.

1. Setting the Page Title

The most common task is updating the browser tab title. You can do this from any component using the usePageTitle hook.

import { usePageTitle } from "jopijs/ui";

export default function MyPage() {
    // This will set <title>My Awesome Page</title>
    usePageTitle("My Awesome Page");

    return <div>Hello World</div>;
}

If multiple components set the title (e.g., a layout and a page), the last one rendered usually wins.

For more complex needs like Meta tags or Favicons, JopiJS exposes the usePageModifier hook. Since these modifications often target the initial HTML sent to the search engines or browsers, we typically wrap them in useServerEffect to ensure they run during Server-Side Rendering (SSR).

Getting the modifier

import { usePageModifier, useServerEffect } from "jopijs/ui";

export default function MyPage() {
    const pageModifier = usePageModifier();

    // Executed only on server side
    // before caching the HTML.
    //
    useServerEffect(() => {
        // Your modifications go here
    });

    return <div>Content</div>;
}

3. SEO & Meta Tags

To improve your site's SEO ranking and social media appearance, you need to set up meta tags.

Description & Viewport:

useServerEffect(() => {
    // <meta name="description" content="..." >
    pageModifier.addMetaToHeader("description", "This is a description of my page for Google.");

    // <meta name="viewport" content="..." >
    pageModifier.addMetaToHeader("viewport", "width=device-width, initial-scale=1");
});

Social Media (Open Graph):

useServerEffect(() => {
    // <meta property="og:title" content="..." >
    pageModifier.addMetaPropertyToHeader("og:title", "My Social Title");

    // <meta property="og:image" content="..." >
    pageModifier.addMetaPropertyToHeader("og:image", "https://example.com/image.png");
});

4. Favicons & Custom Styles

Setting the Favicon

You can easily set the tab icon.

import favicon from "./favicon.ico";

useServerEffect(() => {
    pageModifier.setFavicon(favicon);
});

Modifying `<body>` or adding CSS

Sometimes you need to add a class to the <body> tag (e.g., for theming) or inject critical CSS.

useServerEffect(() => {
    // Result: <body class="dark-mode">
    pageModifier.setBodyTagProps("className", "dark-mode");

    // Inject raw CSS into the <head>
    pageModifier.addCssTextToHeader(".critical-style { display: none; }");
});

Summary of `usePageModifier` methods

Method	HTML Result
`setPageTitle(title)`	`<title>...`
`addMetaToHeader(name, content)`	`<meta name="..." content="...">`
`addMetaPropertyToHeader(prop, content)`	`<meta property="..." content="...">`
`setFavicon(url)`	`<link rel="icon" ...>`
`setBodyTagProps(prop, value)`	`<body ...>`