improve seo

thingbomb · Oct 17, 2024 · 5e8fb33 · 5e8fb33
1 parent 7c63c10
commit 5e8fb33
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 76 deletions.
diff --git a/apps/web/src/app/layout.js b/apps/web/src/app/layout.js
@@ -1,6 +1,9 @@
+"use client";
+
 import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ui/theme-provider";
+import { usePathname } from "next/navigation";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -14,17 +17,23 @@ const geistMono = localFont({
 });
 
 export default function RootLayout({ children }) {
+  const pathname = usePathname();
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <title>Feedbomb</title>
         <link rel="manifest" href="/manifest.json" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="og:title" content="Feedbomb" />
         <meta
           name="og:description"
           content="A minimalistic, fast RSS-reader."
         />
+        {!pathname.startsWith("/read/") && (
+          <>
+            <meta property="og:image" content="/assets/poster.png" />
+            <title>Feedbomb</title>
+          </>
+        )}
       </head>
       <body>
         <ThemeProvider

diff --git a/apps/web/src/app/read/[articleUrl]/page.jsx b/apps/web/src/app/read/[articleUrl]/page.jsx
@@ -46,7 +46,7 @@ const ArticlePage = async ({ params, searchParams }) => {
     isLoading = false;
 
     return (
-      <div>
+      <html lang="en">
         <head>
           <title>{title}</title>
           <meta
@@ -62,87 +62,92 @@ const ArticlePage = async ({ params, searchParams }) => {
           <meta property="twitter:title" content={title} />
           <meta
             property="twitter:image"
-            content={image ? `${image}` : `/assets/poster.png`}
+            content="https://utfs.io/f/AVk7jyeh7wvQ6MWts5dEO1dsnUSH4tpvZbMTGau9x7o0jLYW"
+          />
+          <meta
+            property="image"
+            content="https://utfs.io/f/AVk7jyeh7wvQ6MWts5dEO1dsnUSH4tpvZbMTGau9x7o0jLYW"
           />
-          <meta property="image" content={image} />
           <meta
             property="og:image"
-            content={image ? `${image}` : `/assets/poster.png`}
+            content="https://utfs.io/f/AVk7jyeh7wvQ6MWts5dEO1dsnUSH4tpvZbMTGau9x7o0jLYW"
           />
         </head>
-        <main
-          className={
-            "max-w-4xl mx-auto p-4 rounded-lg mt-8 text-[18px] leading-relaxed " +
-            (src == "reader" ? "pt-16" : "")
-          }
-        >
-          {isLoading ? (
-            <p className="text-gray-500 dark:text-gray-400 text-center">
-              Loading...
-            </p>
-          ) : error ? (
-            <>
-              <b>We're sorry, but we couldn't process this article.</b>
-              <br />
-              <br />
-              <div className="flex gap-2">
+        <body>
+          <main
+            className={
+              "max-w-4xl mx-auto p-4 rounded-lg mt-8 text-[18px] leading-relaxed " +
+              (src == "reader" ? "pt-16" : "")
+            }
+          >
+            {isLoading ? (
+              <p className="text-gray-500 dark:text-gray-400 text-center">
+                Loading...
+              </p>
+            ) : error ? (
+              <>
+                <b>We're sorry, but we couldn't process this article.</b>
+                <br />
+                <br />
+                <div className="flex gap-2">
+                  <a href={decodedUrl}>
+                    <Button>Read on original site</Button>
+                  </a>
+                  <a href="/" className="text-black dark:text-white">
+                    <Button variant="outline">Back to home</Button>
+                  </a>
+                </div>
+              </>
+            ) : (
+              <>
+                <h1 className="text-3xl font-bold mb-2">{title}</h1>
+                {!isYouTubeVideo && (
+                  <p className="text-gray-500 dark:text-gray-400 mb-4">
+                    <strong>
+                      By {typeof author === "string" ? author : author.name}
+                    </strong>{" "}
+                    | <em>{new Date(datePublished).toLocaleString()}</em>
+                    {ttr > 60 ? ` | ${Math.floor(ttr / 60)} min read` : ""}
+                  </p>
+                )}
                 <a href={decodedUrl}>
-                  <Button>Read on original site</Button>
-                </a>
-                <a href="/" className="text-black dark:text-white">
-                  <Button variant="outline">Back to home</Button>
+                  <Button>
+                    {isYouTubeVideo
+                      ? "Watch on YouTube"
+                      : "Read on original site"}
+                  </Button>
                 </a>
-              </div>
-            </>
-          ) : (
-            <>
-              <h1 className="text-3xl font-bold mb-2">{title}</h1>
-              {!isYouTubeVideo && (
-                <p className="text-gray-500 dark:text-gray-400 mb-4">
-                  <strong>
-                    By {typeof author === "string" ? author : author.name}
-                  </strong>{" "}
-                  | <em>{new Date(datePublished).toLocaleString()}</em>
-                  {ttr > 60 ? ` | ${Math.floor(ttr / 60)} min read` : ""}
-                </p>
-              )}
-              <a href={decodedUrl}>
-                <Button>
-                  {isYouTubeVideo
-                    ? "Watch on YouTube"
-                    : "Read on original site"}
-                </Button>
-              </a>
-              <br />
-              <br />
-              {isYouTubeVideo ? (
-                <div className="aspect-w-16 aspect-h-9">
-                  <iframe
-                    src={`https://www.youtube-nocookie.com/embed/${youtubeVideoId}`}
-                    frameBorder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    className="w-full aspect-video"
-                  ></iframe>
-                </div>
-              ) : (
-                <article
-                  className="prose lg:prose-xl"
-                  dangerouslySetInnerHTML={{ __html: content }}
-                />
-              )}
-            </>
-          )}
-        </main>
-        <ReadHistory
-          data={{
-            title: title,
-            link: decodedUrl,
-            pubDate: datePublished,
-            author: typeof author === "string" ? author : author.name,
-          }}
-        />
-      </div>
+                <br />
+                <br />
+                {isYouTubeVideo ? (
+                  <div className="aspect-w-16 aspect-h-9">
+                    <iframe
+                      src={`https://www.youtube-nocookie.com/embed/${youtubeVideoId}`}
+                      frameBorder="0"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                      className="w-full aspect-video"
+                    ></iframe>
+                  </div>
+                ) : (
+                  <article
+                    className="prose lg:prose-xl"
+                    dangerouslySetInnerHTML={{ __html: content }}
+                  />
+                )}
+              </>
+            )}
+          </main>
+          <ReadHistory
+            data={{
+              title: title,
+              link: decodedUrl,
+              pubDate: datePublished,
+              author: typeof author === "string" ? author : author.name,
+            }}
+          />
+        </body>
+      </html>
     );
   } catch (err) {
     return (