Skip to content

Proposal :: Meta Tags :: Only render a tag when content is available #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eduardobbrito wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Proposal :: Meta Tags :: Only render a tag when content is available #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 40 additions & 18 deletions components/seo/Metatags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,14 @@ import Preview from "./components/Preview.tsx";
import type { Props } from "./types.ts";

function Metatags(props: Props) {
const { titleTemplate = "", context, type, themeColor, favicon } = props;
const twitterCard = type === "website" ? "summary" : "summary_large_image";
const {
titleTemplate = "",
context,
type,
themeColor,
favicon,
twitterCard,
} = props;

const tags = context?.["@type"] === "ProductDetailsPage"
? tagsFromProduct(context, titleTemplate)
Expand All @@ -23,24 +29,40 @@ function Metatags(props: Props) {
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta name="theme-color" content={themeColor} />
<link rel="icon" href={favicon} />
{title && (
<>
<title>{title}</title>
<meta property="og:title" content={title} />
</>
)}

{description && (
<>
<meta name="description" content={description} />
<meta property="og:description" content={description} />
</>
)}

{image && (
<>
<meta property="og:image" content={image} />
</>
)}

{/* Twitter tags */}
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />
<meta property="twitter:card" content={twitterCard} />
{/* OpenGraph tags */}
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type} />
<meta property="og:image" content={image} />
{themeColor && <meta name="theme-color" content={themeColor} />}

{/* Link tags */}
{canonical && <link rel="canonical" href={canonical} />}
{favicon && <link rel="icon" href={favicon} />}

{twitterCard && <meta property="twitter:card" content={twitterCard} />}

{type && <meta property="og:type" content={type} />}

{canonical && (
<>
<meta property="og:url" content={canonical} />
<link rel="canonical" href={canonical} />
</>
)}

{/* No index, no follow */}
{props?.noIndexNoFollow && (
Expand Down
4 changes: 4 additions & 0 deletions components/seo/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ export interface Dimensions {
height: number;
}

type TwitterCard = "summary" | "summary_large_image";

export interface Props {
title?: string;
/**
Expand All @@ -31,6 +33,8 @@ export interface Props {
themeColor?: string;
/** @title Canonical URL */
canonical?: string;
/** @title Twitter Card */
twitterCard?: TwitterCard;
/**
* @title Disable indexing
* @description In testing, you can use this to prevent search engines from indexing your site
Expand Down