SEO
Open src/config/site.ts
and update the following values:
export const site = {
name: "My Site",
description: "My site description",
url: "https://my-site.com",
ogImage: "https://my-site.com/images/og.png",
links: {
twitter: "https://twitter.com/my-site",
instagram: "https://instagram.com/my-site",
},
};
Metadata
Then open src/app/layout.tsx
and update the metadata with your own values:
export const metadata: Metadata = {
title: {
default: siteConfig.name,
template: `%s | ${siteConfig.name}`,
},
description: siteConfig.description,
keywords: [
"Next.js",
"React",
"Tailwind CSS",
"Server Components",
"Radix UI",
"SaaS",
"Boilerplate",
"Template",
"Saas boilerplate",
"Saas starter kit",
],
authors: [
{
name: "salmandotweb",
url: "https://www.salmandotweb.me",
},
],
creator: "salmandotweb",
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
openGraph: {
type: "website",
locale: "en_US",
url: siteConfig.url,
title: siteConfig.name,
description: siteConfig.description,
siteName: siteConfig.name,
},
twitter: {
card: "summary_large_image",
title: siteConfig.name,
description: siteConfig.description,
images: [`${siteConfig.url}/og.jpg`],
creator: "@salmandotweb",
},
icons: {
icon: "/brand/favicon.svg",
shortcut: "/favicon-16x16.png",
apple: "/apple-touch-icon.png",
},
manifest: `${siteConfig.url}/site.webmanifest`,
};
Favicon
To Change the favicon, replace the favicon.svg
file in public
folder along with og.png and other images.
Fonts
For fonts, we are using next/fonts/google
package. You can change it in src/app/layout.tsx
file.
import { Bricolage_Grotesque } from "next/font/google";
const font = Bricolage_Grotesque({
subsets: ["latin"],
weight: ["200", "300", "400", "500", "600", "700", "800"],
});