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

> Discover the dependencies of the seo.ts file in every-app/open-seo. Learn how it uses only built-in JavaScript and Node.js features for a lean and efficient approach.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: internals
- Published: 2026-07-06

---

**The [`seo.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/seo.ts) module located at [`web/src/lib/seo.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/seo.ts) itself is dependency-free, the broader web application defined in [`web/package.json`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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

```tsx
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

```ts
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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/seo.ts) require React to function?

No. The [`seo.ts`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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`](https://github.com/every-app/open-seo/blob/main/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.