Only fetch open graph metadata for html urls

.changeset/real-dancers-punch.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Only fetch open graph metadata for html urls

src/components/open-graph-card.tsx

@@ -15,7 +15,7 @@ export default function OpenGraphCard({ url, ...props }: { url: URL } & Omit<Car
   return (
     <LinkBox borderRadius="lg" borderWidth={1} overflow="hidden" {...props}>
       {data.ogImage?.map((ogImage) => (
-        <Image src={ogImage.url} mx="auto" />
+        <Image key={ogImage.url} src={ogImage.url} mx="auto" />
       ))}
 
       <Box m="2" mt="4">

src/hooks/use-open-graph-data.ts

@@ -2,11 +2,22 @@ import { useAsync } from "react-use";
 import extractMetaTags from "../lib/open-graph-scraper/extract";
 import { fetchWithCorsFallback } from "../helpers/cors";
 
+const pageExtensions = [".html", ".php", "htm"];
+
 export default function useOpenGraphData(url: URL) {
   return useAsync(async () => {
+    const controller = new AbortController();
+    const ext = url.pathname.match(/\.[\w+d]+$/)?.[0];
+    if (ext && !pageExtensions.includes(ext)) return null;
+
     try {
-      const html = await fetchWithCorsFallback(url).then((res) => res.text());
+      const res = await fetchWithCorsFallback(url, { signal: controller.signal });
+      const contentType = res.headers.get("content-type");
+
+      if (contentType?.includes("text/html")) {
+        const html = await res.text();
         return extractMetaTags(html);
+      } else controller.abort();
     } catch (e) {}
     return null;
   }, [url.toString()]);