Get Title from URL

title-from-url.ts

// Note: this gist is a part of this OSS project that I'm currently working on: https://github.com/steven-tey/dub

export default async function getTitleFromUrl (url: string) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 2000); // timeout if it takes longer than 2 seconds
  const title = await fetch(url, { signal: controller.signal })
    .then((res) => {
      clearTimeout(timeoutId);
      return res.text();
    })
    .then((body: string) => {
      let match = body.match(/<title>([^<]*)<\/title>/); // regular expression to parse contents of the <title> tag
      if (!match || typeof match[1] !== "string") return "No title found"; // if no title found, return "No title found"
      return match[1];
    })
    .catch((err) => {
      console.log(err);
      return "No title found"; // if there's an error, return "No title found"
    });
  return title;
};

Nice! Just a note - this will not play well with cors sadly.

Can you give more detail? Why doesn't this work with CORS?

Can you give more detail? Why doesn't this work with CORS?

Sure. Given that this code can be run in node and in browser, browser will try to respect CORS rules on target website.
Hence running this for example: await getTitleFromUrl('https://www.kickstarter.com/projects/81monkeys/world-of-anterra') would result in an error and return "No title found".

@Marcisbee thanks, that makes sense.

@Marcisbee @joshdance Oh yeah, good point, I should've mentioned that in the demo, I'm calling a Next.js Edge API Route that runs the getTitleFromURL function. Here's the full code for that:

// /api/utils/title-from-url.ts

import type { NextRequest } from "next/server";
import { getTitleFromUrl } from "@/lib/utils";

export const config = {
  runtime: "experimental-edge",
};

export default async function handler(req: NextRequest) {
  if (req.method === "GET") {
    const url = req.nextUrl.searchParams.get("url");
    if (!url) {
      return new Response("Missing url", { status: 400 });
    }
    const title = await getTitleFromUrl(url);
    return new Response(JSON.stringify(title), { status: 200 });
  } else {
    return new Response(`Method ${req.method} Not Allowed`, { status: 405 });
  }
}

And you'll basically call the /api/utils/title-from-url endpoint on the client side with SWR/fetch.

Hope that clarifies things!

Super cool gist! I ran into an issue when sites' titles had attributes inside (common for sites that use react-helmet) so I'd propose this fix to get around that problem:

.then((body: string) => {
      const match = body.match(/<title([^<]*)>([^<]*)<\/title>/) // regular expression to parse contents of the <title> tag
      if (!match || typeof match[match.length - 1] !== "string")
        return "No title found" // if no title found, return "No title found"
      return match[match.length - 1]
    })