useDocumentTitle

Usage

"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