import {
renderMetaTags,
type SeoMetaTag,
type SeoTitleTag,
} from "react-datocms";
import Head from "next/head";
import {
SITE_DESCRIPTION,
SITE_TITLE,
SITE_URL,
TWITTER_USERNAME,
} from "@/config/constants";
import { buildStaticAssetPath } from "@/helpers/file";
import type { SeoMetaTags } from "@/types";
const DEFAULT_SEO_IMAGE = buildStaticAssetPath("og-image", "img");
const DEFAULT_SEO_IMAGE_WIDTH = 1200;
const DEFAULT_SEO_IMAGE_HEIGHT = 630;
const createMetaTag = (
attributeKey: "name" | "property" | null,
name: string,
content: string = "",
): SeoMetaTag => {
const meta: SeoMetaTag = {
attributes: {
name: name,
content: content,
},
tag: "meta",
content: null,
};
if (attributeKey != null) {
if (attributeKey == "name") {
meta.attributes = {
name: name,
content: content,
};
} else if (attributeKey == "property") {
meta.attributes = {
property: name,
content: content,
};
}
}
return meta;
};
const createPageSchema = (type: string) => ({
"@context": "https://schema.org",
"@type": type,
name: "Suno",
description:
"Suno is a music company built to amplify imagination. From shower-singers to aspiring songwriters to seasoned artists, Suno empowers a global community to create, share, and discover music—unlocking the joy of musical expression for all.",
specialty: "AI Music Generation",
about:
"Suno is a music company built to amplify imagination. From shower-singers to aspiring songwriters to seasoned artists, Suno empowers a global community to create, share, and discover music—unlocking the joy of musical expression for all.",
publisher: {
"@type": "Organization",
name: "Suno",
sameAs: [
"https://x.com/suno",
"https://www.instagram.com/sunomusic",
"https://discord.com/invite/suno",
"https://www.tiktok.com/@sunomusic",
"https://www.youtube.com/@suno",
],
url: "https://suno.com",
description: "Suno is building a future where anyone can make great music.",
address: {
"@type": "PostalAddress",
addressLocality: "Cambridge",
addressRegion: "MA",
},
},
});
interface SeoMetaProps {
title?: string;
description?: string;
type?: string;
metaTags?: SeoMetaTags;
schemaType?: string;
canonicalPathname?: string;
}
export default function SeoMeta({
title: pageTitle,
description: pageDescription,
type = "website",
metaTags,
schemaType,
canonicalPathname,
}: SeoMetaProps) {
const title = pageTitle ? `${pageTitle} - ${SITE_TITLE}` : SITE_TITLE;
const description = pageDescription ?? SITE_DESCRIPTION;
const allMetaTags = [
{ tag: "title", content: title } as SeoTitleTag,
createMetaTag("name", "title", title),
createMetaTag("name", "description", description),
createMetaTag("property", "og:title", title),
createMetaTag("property", "og:description", description),
createMetaTag("property", "og:url", SITE_URL),
createMetaTag("name", "theme-color", "#f4f3f0"), // off-white
createMetaTag("property", "og:locale", "en_US"),
createMetaTag("property", "og:type", type),
createMetaTag("property", "og:image", DEFAULT_SEO_IMAGE),
createMetaTag("property", "og:image:alt", SITE_TITLE),
createMetaTag(
"property",
"og:image:width",
String(DEFAULT_SEO_IMAGE_WIDTH),
),
createMetaTag(
"property",
"og:image:height",
String(DEFAULT_SEO_IMAGE_HEIGHT),
),
createMetaTag("property", "twitter:site", `@${TWITTER_USERNAME}`),
createMetaTag("name", "twitter:title", title),
createMetaTag("name", "twitter:card", "summary"),
createMetaTag("name", "twitter:description", description),
createMetaTag("name", "twitter:image", DEFAULT_SEO_IMAGE),
...(metaTags || []),
];
return (
{renderMetaTags(allMetaTags)}
{schemaType && (
)}
);
}