diff --git a/.changeset/real-dancers-punch.md b/.changeset/real-dancers-punch.md
new file mode 100644
index 000000000..8f31606a5
--- /dev/null
+++ b/.changeset/real-dancers-punch.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Only fetch open graph metadata for html urls
diff --git a/src/components/open-graph-card.tsx b/src/components/open-graph-card.tsx
index b61498799..8da40c248 100644
--- a/src/components/open-graph-card.tsx
+++ b/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">
diff --git a/src/hooks/use-open-graph-data.ts b/src/hooks/use-open-graph-data.ts
index 974329523..40ee59c81 100644
--- a/src/hooks/use-open-graph-data.ts
+++ b/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());
-      return extractMetaTags(html);
+      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()]);