diff --git a/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx b/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx index d7ee531..783b0dd 100644 --- a/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx +++ b/apps/dashboard/src/components/Splash/Tools/OpenGraphImageChecker.tsx @@ -13,7 +13,12 @@ import { useDebouncedCallback } from "use-debounce"; import { usePreviewControls } from "../../../lib/hooks/usePreviewControls"; import { InfoIcon } from "../../icons/InfoIcon"; import { OgImage } from "../../OgImage"; -import { META_KEYS, META_TAGS, type MetaTags } from "../../../lib/meta"; +import { + META_KEYS, + META_TAGS, + REQUIRED_META_TAGS, + type MetaTags, +} from "../../../lib/meta"; export function OpenGraphImageChecker() { const [loading, setLoading] = useState(false); @@ -98,7 +103,8 @@ export function OpenGraphImageChecker() { {loading ? ( ) : ( - data?.[tag] ?? "⚠️ Missing value" + data?.[tag] ?? + `⚠️ Missing value (${REQUIRED_META_TAGS.includes(tag) ? "required" : "optional"})` )} diff --git a/apps/dashboard/src/lib/meta.ts b/apps/dashboard/src/lib/meta.ts index c96cad1..41aac56 100644 --- a/apps/dashboard/src/lib/meta.ts +++ b/apps/dashboard/src/lib/meta.ts @@ -1,13 +1,21 @@ export const META_TAGS = { "og:title": "The title of your object as it should appear within the graph.", - "og:description": "A one to two sentence description of your object.", - "og:site_name": "The name which should be displayed for the overall site.", - "og:url": - "The canonical URL of your object that will be used as its permanent ID in the graph.", + "og:type": "The type of your object, e.g., 'video.movie'.", "og:image": "An image URL which should represent your object within the graph.", + "og:url": + "The canonical URL of your object that will be used as its permanent ID in the graph.", + "og:description": "A one to two sentence description of your object.", + "og:site_name": "The name which should be displayed for the overall site.", } as const; +export const REQUIRED_META_TAGS: MetaTags[] = [ + "og:title", + "og:type", + "og:image", + "og:url", +]; + export const META_KEYS = Object.keys(META_TAGS) as MetaTags[]; export type MetaTags = keyof typeof META_TAGS;