useDocumentTitle

Usage

Basic usage example to quickly see how the useDocumentTitle works.

"use client";
import { useState } from "react";
import { Input } from "@/ui/input";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";
import { useDocumentTitle } from "@/hooks/use-document-title";

export function UseDocumentTitleDemo() {
  const [newTitle, setNewTitle] = useState<string>("describe your title");
  useDocumentTitle(newTitle);

  return (
    <Stack className="m-auto max-w-96">
      <Input value={newTitle} onChange={e => setNewTitle(e.target.value)} />
      <Typography prose="p">Changing the title on the &lt;title&gt; Element:</Typography>
    </Stack>
  );
}

API References

• mdn
• client apis

useDocumentTitle helps you dynamically redefine the document title displayed in the browser title bar or on a page tab.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

Note: useDocumentTitle runs on the client side so the title you set will be applied when the page is mounted. So, you can create a more accurate initial title for the SEO of your web application, try to make the title as accurate and meaningful as possible!

Here are some tips for creating a good title:

• Go for a longer, descriptive title (avoid one- or two-word titles) .
• Search engines will display about 50-60 characters of the title, so try not to have titles longer than that.
• Do not use just a list of words as the title (this may reduce the page's position in search results).

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.