correct-apricot•2y ago

Site Title refine v4

Hey, I want to change site title. The one which appear on chrome tab. I am update site logo(favicon) but the title is not updating. Please let me How can I do that. Thanks...

9 Replies

kapa.ai•2y ago

Hi @Gopi_Krishna. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the site title that appears on the browser tab, you need to modify the <title> tag in your index.html file. The <title> tag is located within the <head> section of your HTML document. Here's an example of how you can do it:

<!DOCTYPE html>  
<html lang="en">  
 <head>  
 <title>Your New Site Title</title>  
 </head>  
 <body>  
 ...  
 </body>  
</html>

<!DOCTYPE html>  
<html lang="en">  
 <head>  
 <title>Your New Site Title</title>  
 </head>  
 <body>  
 ...  
 </body>  
</html>

Just replace "Your New Site Title" with the title you want to display on the browser tab. Please note that this change will affect the title across your entire application. If you want to have different titles for different pages, you would need to dynamically change the title using JavaScript based on the current page. For more information, you can refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@887020425320734720> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricotOP•2y ago

But refine project doesn't contain index.html, that's why we use _document.tsx. I have change in there but it's not reflecting....

correct-apricot•2y ago

Hello @Gopi_Krishna, you can use <DocumentTitleHandler /> component for that: https://refine.dev/docs/packages/documentation/routers/nextjs/#documenttitlehandler

Next.js | refine

refine provides router bindings and utilities for Next.js. This package will provide easy integration between refine and Next.js for both existing projects and new projects without giving up the benefits of Next.js.

correct-apricotOP•2y ago

Hey @batuhanw, Thanks for the reply. I want to set default title to "some title" not page wise.

correct-apricot•2y ago

Hey @Gopi_Krishna then it's a question about NextJS, refine doesn't interfere with how default title is handled. You can check NextJS docs for that.

correct-apricotOP•2y ago

But the default title is being rendered as "Refine". How can I set this "some title"???

correct-apricot•2y ago

Can you check this one and see if it helps? https://nextjs.org/docs/messages/no-document-title#possible-ways-to-fix-it

` should not be used in _document.js <Head>`

foreign-sapphire•4mo ago

I created an app with Refine, I found site title was defined at src/app/layout.tsx, I can change metadata to change title:

import type { Metadata } from "next";
import { cookies } from "next/headers";
import React, { Suspense } from "react";
import { RefineContext } from "./_refine_context";

export const metadata: Metadata = {
  title: "Insta Mail",
  description: "Writing emails is as simple and fun as a puzzle game",
  icons: {
    icon: "/favicon.ico",
  },
};

import type { Metadata } from "next";
import { cookies } from "next/headers";
import React, { Suspense } from "react";
import { RefineContext } from "./_refine_context";

export const metadata: Metadata = {
  title: "Insta Mail",
  description: "Writing emails is as simple and fun as a puzzle game",
  icons: {
    icon: "/favicon.ico",
  },
};

Site Title refine v4

Did you find this page helpful?