feat: initial seo efforts

app/lib/meta.ts

@@ -0,0 +1,17 @@
+import OGImage from "../images/og_default.png";
+
+export function generateMetaTags(
+  title: string,
+  description: string,
+  imageUrl = OGImage,
+  ogType: "website" | "article" = "website"
+) {
+  return [
+    { name: "title", content: title },
+    { name: "description", content: description },
+    { name: "og:title", content: title },
+    { name: "og:description", content: description },
+    { name: "og:image", content: imageUrl },
+    { name: "og:type", content: ogType },
+  ];
+}

app/routes/__info.about.tsx

@@ -2,7 +2,15 @@ import { ArrowIcon } from "@/components/ArrowIcon";
 import * as GraphicSection from "@/components/GraphicSection";
 
 import Logo from "@/images/lume-logo-bg.png";
+import { generateMetaTags } from "@/lib/meta.js";
 
+export function meta() {
+  const title = "About - web3.news: Uniting Web3 Community";
+  const description =
+    "Explore web3.news's mission to unite the Web3, Crypto, and DeFi communities under shared values of free speech, financial freedom, and privacy. Join our collaborative journey towards a technology-driven future.";
+
+  return [...generateMetaTags(title, description)];
+}
 export default function Page() {
   return (
     <span className="px-8 block text-gray-400 space-y-5">

app/routes/__info.donate.tsx

@@ -1,5 +1,13 @@
 import { Link } from "@remix-run/react";
+import { generateMetaTags } from "@/lib/meta.js";
 
+export function meta() {
+  const title = "Support - web3.news: Empowering a User-Owned Web";
+  const description =
+    "Join the mission of web3.news to shape an open, decentralized web. Your support fuels our commitment to community-driven innovation, transparency, and education in the Web3 space. Help us maintain our ad-free, user-focused platform. Donate now to be a part of this transformative journey.";
+
+  return [...generateMetaTags(title, description)];
+}
 export default function Page() {
   return (
     <article className="px-8 block text-gray-400 space-y-5">

app/routes/_index.tsx

@@ -10,12 +10,20 @@ import { json, LoaderFunction, redirect } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { SiteList } from "@/types.js";
 import { getAvailableSites } from "@/utils";
+import { generateMetaTags } from "@/lib/meta.js";
 
 type LoaderData = {
   data: ApiResponse<Article>;
   sites: SiteList;
 };
 
+export function meta() {
+  const title = "web3.news - Your Community Hub for Web3 & Blockchain News";
+  const description =
+    "Explore the pulse of the Web3 and blockchain world on web3.news, a community-driven platform championing privacy, free speech, and informed collaboration. Dive into the latest in Crypto and DeFi with us.";
+
+  return [...generateMetaTags(title, description)];
+}
 export let loader: LoaderFunction = async ({ request }) => {
   const url = new URL(request.url);
   const referer = request.headers.get("referer");

app/routes/article.$cid.tsx

@@ -3,6 +3,19 @@ import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { prisma } from "@/lib/prisma";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { Article } from "@prisma/client";
+import { generateMetaTags } from "@/lib/meta.js";
+
+export function meta({ data }: { data: Article }) {
+  const title = `${data.title} - web3.news`;
+  const description = `Read "${data.title}" on web3.news. Dive into insightful Web3 and blockchain discussions and stay updated with the latest trends and developments.`;
+
+  return [
+    ...generateMetaTags(title, description, undefined, "article"),
+    { name: "og:url", content: data.url },
+    { name: "twitter:url", content: data.url },
+    { name: "canonical", content: data.url },
+  ];
+}
 
 // Loader function to fetch article data
 export async function loader({ params }: LoaderFunctionArgs) {

app/routes/search.tsx

@@ -5,6 +5,7 @@ import SimplifiedSearchBar from "@/components/SimplifiedSearchBar";
 import { Link, useLoaderData, useSearchParams } from "@remix-run/react";
 import { json, LoaderFunction } from "@remix-run/node";
 import type { SearchResult, SiteList } from "@/types.js";
+import { generateMetaTags } from "@/lib/meta.js";
 
 type LoaderData = {
   sites: SiteList;
@@ -12,6 +13,13 @@ type LoaderData = {
   query: string;
 };
 
+export function meta() {
+  const title = "Search - web3.news: Discover Community Web3 News";
+  const description =
+    "Explore a vast array of Web3, Crypto, and DeFi news and insights. Use web3.news search to dive deep into community-driven content, uncovering the latest trends and developments in the decentralized world.";
+
+  return [...generateMetaTags(title, description)];
+}
 export let loader: LoaderFunction = async ({ request }) => {
   const sites = getAvailableSites();
   const search = new URL(request.url).searchParams;