AbsoluteJS

Head & Meta Tags

Control page titles, meta tags, and SEO across different frameworks.

#React

React components render the full HTML document, giving you complete control over the head section:

TSX
// React components render the full HTML including head
export const Page = ({ title, description }: PageProps) => (
  <html lang="en">
    <head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>{title}</title>
      <meta name="description" content={description} />
      <link rel="icon" href="/favicon.ico" />
      <link rel="stylesheet" href="/styles/global.css" />
    </head>
    <body>
      {/* content */}
    </body>
  </html>
);

#Vue

Vue uses the headTag parameter in handleVuePageRequest:

TS
// Vue uses handleVuePageRequest's headTag option
.get('/products/:id', async ({ params }) => {
  const product = await getProduct(params.id);

  return handleVuePageRequest({
    Page: ProductPage,
    headTag: `<head><title>${product.name} | My Store</title>
     <meta name="description" content="${product.description}" /></head>`,
    indexPath,
    pagePath,
    props: { product }
  });
})

#Svelte

Svelte components render the full HTML document, giving you complete control over the head section:

SVELTE
<!-- Svelte components render the full HTML including head -->
<script lang="ts">
  export let title: string;
  export let description: string;
</script>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="icon" href="/favicon.ico" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

#HTMX

HTMX pages are real .html files with full control over the head section:

HTML
<!-- dashboard.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dashboard | Admin</title>
    <meta name="robots" content="noindex" />
    <script src="https://unpkg.com/htmx.org"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

#HTML

HTML pages are real .html files with full control over the head section:

HTML
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>About Us | Company</title>
    <meta name="description" content="Learn about our company" />
    <meta property="og:title" content="About Us" />
    <meta property="og:type" content="website" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

#SEO Considerations

Since AbsoluteJS uses server-side rendering, all meta tags are present in the initial HTML response: perfect for SEO.

Title tagsUnique, descriptive titles for each page
Meta descriptionsSummarize page content for search results
Open Graph tagsControl social media previews
Canonical URLsPrevent duplicate content issues