Skip to content

Instantly share code, notes, and snippets.

@ericzakariasson
Created April 14, 2023 06:29
Show Gist options
  • Save ericzakariasson/d7e96140659289deb2c0ef258047090f to your computer and use it in GitHub Desktop.
Save ericzakariasson/d7e96140659289deb2c0ef258047090f to your computer and use it in GitHub Desktop.
import Head from "next/head";
import { useRouter } from "next/router";
type SeoProps = {
title?: string;
description?: string;
image?: string;
};
const defaultProps: Required<Pick<SeoProps, "description" | "image">> = {
description:
"setup your web3 profile and connect with others by turning your social tokens into social signals.",
image: "/preview.jpg",
};
const getOrigin = () => {
if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production") {
return "https://belong.haus";
}
if (process.env.NEXT_PUBLIC_VERCEL_URL) {
return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
}
return "http://localhost:3000";
};
export const Seo = ({
title,
description = defaultProps.description,
image = defaultProps.image,
}: SeoProps) => {
const { asPath } = useRouter();
const origin = getOrigin();
const prefixedTitle = title ? `belong/${title}` : "belong";
return (
<Head>
<title>{prefixedTitle}</title>
<meta
name="keywords"
content="web3 profile, web3 social, web3, social profile, share tokens, share belonging, web3 memberships, web3 community, social tokens, fungible token profile, non-fungible token profile"
/>
<meta name="robots" content="index, follow" />
{/* open graph */}
<meta property="og:title" content={prefixedTitle} />
<meta property="og:description" content={description} />
<meta property="og:url" content={origin + asPath} />
<meta property="og:site_name" content="belong" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta name="image" property="og:image" content={origin + image} />
<meta property="og:image:url" content={origin + image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{/* twitter */}
<meta name="twitter:title" content={prefixedTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={origin + image} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@belonghaus" />
<meta name="twitter:creator" content="@belonghaus" />
</Head>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment