[Issue 397] SEO title and description (#418)

* title and head in index
HHS · Aug 25, 2023 · ab6211e · ab6211e
1 parent 7878dbe
commit ab6211e
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 3 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -1,8 +1,7 @@
 {
   "Index": {
-    "title": "Home",
-    "intro": "This is a template for a React web application using the <LinkToNextJs>Next.js framework</LinkToNextJs>.",
-    "body": "This is template includes:<ul><li>Framework for server-side rendered, static, or hybrid React applications</li><li>TypeScript and React testing tools</li><li>U.S. Web Design System for themeable styling and a set of common components</li><li>Type checking, linting, and code formatting tools</li><li>Storybook for a frontend workshop environment</li></ul>",
+    "page_title": "Home | Beta.grants.gov",
+    "meta_description": "A one-stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
     "alert": "This website is a work in progress. To search for funding opportunities and apply, visit <LinkToGrants>www.grants.gov</LinkToGrants>.",
     "goal_title": "What's the goal?",
     "goal_paragraph_1": "We want Grants.gov to be the simplest, most inclusive, and most gratifying tool ever built for posting, finding, sharing, and applying for financial assistance. Our mission is to increase access to grants and improve the grants experience for everyone.",

diff --git a/frontend/src/components/PageSEO.tsx b/frontend/src/components/PageSEO.tsx
@@ -0,0 +1,23 @@
+import Head from "next/head";
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+const PageSEO = ({ title, description }: Props) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta property="og:title" content={title} key="title" />
+      <meta
+        data-testid="meta-description"
+        name="description"
+        content={description}
+        key="description"
+      />
+    </Head>
+  );
+};
+
+export default PageSEO;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -4,6 +4,7 @@ import { ExternalRoutes } from "src/constants/routes";
 import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import PageSEO from "src/components/PageSEO";
 import WtGIContent from "src/components/WtGIContent";
 import FullWidthAlert from "../components/FullWidthAlert";
 import FundingContent from "../components/FundingContent";
@@ -15,6 +16,7 @@ const Home: NextPage = () => {
 
   return (
     <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
       <Hero />
       <FullWidthAlert type="info">
         <Trans

diff --git a/frontend/tests/components/PageSEO.test.tsx b/frontend/tests/components/PageSEO.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+
+import PageSEO from "src/components/PageSEO";
+
+jest.mock("next/head", () => {
+  return {
+    __esModule: true,
+    default: ({ children }: { children: Array<React.ReactElement> }) => {
+      return <>{children}</>;
+    },
+  };
+});
+
+describe("PageSEO", () => {
+  it("Renders title without errors", () => {
+    const props = { title: "test title", description: "test description" };
+    render(<PageSEO {...props} />);
+    const title = screen.getByText("test title");
+    expect(title).toBeInTheDocument();
+  });
+
+  it("Renders meta description content without errors", () => {
+    const props = { title: "test title", description: "test description" };
+    render(<PageSEO {...props} />);
+    const description = screen.getByTestId("meta-description");
+    expect(description).toBeInTheDocument();
+  });
+
+  it("Renders the correct title after rerendering", () => {
+    const initialProps = {
+      title: "test title",
+      description: "test description",
+    };
+    const updatedProps = {
+      title: "updated test title",
+      description: "updated test description",
+    };
+    const { rerender } = render(<PageSEO {...initialProps} />);
+    const title = screen.getByText("test title");
+    expect(title).toBeInTheDocument();
+    rerender(<PageSEO {...updatedProps} />);
+    const oldTitle = screen.queryByText("test title");
+    const updatedtitle = screen.getByText("updated test title");
+    expect(oldTitle).not.toBeInTheDocument();
+    expect(updatedtitle).toBeInTheDocument();
+  });
+});