Dependencies of the seo.ts File in every-app/open-seo

The seo.ts file in every-app/open-seo has zero third-party dependencies and relies solely on built-in JavaScript/Node.js features such as process.env and the global URL constructor.

The seo.ts module located at web/src/lib/seo.ts provides a lightweight utility for generating SEO meta tags and canonical URLs. When analyzing the dependencies of the seo.ts file, you will find that it is completely self-contained, requiring no external npm packages to perform its core functionality.

Built-In Runtime Features Used by seo.ts

Because the file contains no import statements for third-party libraries, it operates using only native language and runtime capabilities:

• process.env – Accesses Node.js environment variables (SITE_URL or VITE_SITE_URL) to determine the base site URL.
• URL constructor – Leverages the standard Web API to build absolute URLs for canonical links and Open Graph images.
• TypeScript types – Uses type BuildSeoParams for compile-time type safety (no runtime cost).
• Template literals and array spreads – Native JavaScript features for assembling meta-tag objects.

The buildPageSeo Function Implementation

The core export of web/src/lib/seo.ts is the buildPageSeo function, which constructs SEO metadata without relying on external utilities.

It accepts parameters defined by the BuildSeoParams type and returns an object containing meta and links arrays. The function reads the site URL from process.env.SITE_URL or process.env.VITE_SITE_URL, then uses the global URL constructor to resolve relative paths into absolute canonical URLs.

Project Dependencies vs. Module Dependencies

While seo.ts itself is dependency-free, the broader web application defined in web/package.json includes packages like React, TanStack Router, and Vite. These are available in the project environment but are not imported by seo.ts. This architectural choice ensures the SEO utility remains framework-agnostic and can function in any JavaScript runtime that supports standard Web APIs.

Practical Usage Examples

You can import buildPageSeo into React components or static site generators without worrying about transitive dependency chains.

React Component Integration

import { Helmet } from "react-helmet";
import { buildPageSeo } from "@/lib/seo";

export default function AboutPage() {
  const seo = buildPageSeo({
    title: "About Open SEO",
    path: "/about",
    description: "Learn how Open SEO helps you rank higher.",
    titleSuffix: "Open SEO",
    ogType: "website",
  });

  return (
    <>
      <Helmet>
        {seo.meta.map((tag, i) => {
          if ("title" in tag) return <title key={i}>{tag.title}</title>;
          if ("name" in tag) return <meta key={i} name={tag.name} content={tag.content} />;
          return <meta key={i} property={tag.property} content={tag.content} />;
        })}
        <link rel="canonical" href={seo.links[0].href} />
      </Helmet>

      <h1>About Open SEO</h1>
    </>
  );
}

Static Site Generation

import { buildPageSeo } from "./seo";

const seo = buildPageSeo({
  title: "Home",
  path: "/",
  description: "Welcome to Open SEO",
});

console.log(seo.meta);
console.log(seo.links);

Summary

• web/src/lib/seo.ts contains no third-party dependencies and uses zero import statements for external modules.
• The file relies on built-in JavaScript features: process.env, the global URL constructor, and native array/string methods.
• It reads configuration from environment variables (SITE_URL or VITE_SITE_URL) available at runtime.
• The project-wide dependencies listed in web/package.json (React, Vite, etc.) are not required by this specific module.
• The buildPageSeo function is framework-agnostic and works in any standard JavaScript environment.

Frequently Asked Questions

Does seo.ts require React to function?

No. The seo.ts file is framework-agnostic and does not import React or any UI library. It returns plain JavaScript objects that can be consumed by React, Vue, Svelte, or vanilla JavaScript applications.

How does seo.ts handle environment variables?

The module reads process.env.SITE_URL or process.env.VITE_SITE_URL to construct absolute URLs. These variables must be set in your deployment environment or .env file, but no additional npm packages are needed to access them.

Can I copy seo.ts into another project without installing dependencies?

Yes. Because the file depends only on built-in JavaScript/Node.js APIs, you can copy web/src/lib/seo.ts into any project with TypeScript support. You only need to ensure the environment variables are defined.

What is the buildPageSeo function used for?

buildPageSeo generates structured SEO metadata including meta tags for Open Graph and Twitter Cards, plus canonical link tags. It accepts a BuildSeoParams object and returns arrays ready for injection into HTML document heads.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}