Skip to content

Latest commit

 

History

History
56 lines (45 loc) · 1.62 KB

metadata.md

File metadata and controls

56 lines (45 loc) · 1.62 KB

Metadata

Setting metadata

React Helmet Async is used to manage all of your changes to the document head. You can add a Helmet tag to any page that you would like to update the document head.

  • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
  • Supports attributes for body, html and title tags.

The following example can be found in the main route of the example in this repository. The Helmet in the main route of a directory will apply to all routes within the directory.

import { Suspense } from "react";
import { DefaultErrorFallback, ErrorBoundary, Helmet } from "@udibo/react-app";
import { Outlet } from "react-router-dom";
import "../log.ts";

import { Loading } from "../components/loading.tsx";

export default function Main() {
  return (
    <>
      <Helmet
        defaultTitle="Example"
        titleTemplate="Example | %s"
        htmlAttributes={{ lang: "en" }}
      >
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>
      <Suspense fallback={<Loading />}>
        <ErrorBoundary FallbackComponent={DefaultErrorFallback}>
          <Outlet />
        </ErrorBoundary>
      </Suspense>
    </>
  );
}

More examples of Helmet tag usage can be found in the React Helmet Reference Guide.

SEO

TODO: Explain the basics of setting up SEO metadata and using lighthouse to test it.