diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 9e8f77ae2..7d5c6cef7 100644
--- 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 Next.js framework.",
- "body": "This is template includes:- Framework for server-side rendered, static, or hybrid React applications
- TypeScript and React testing tools
- U.S. Web Design System for themeable styling and a set of common components
- Type checking, linting, and code formatting tools
- Storybook for a frontend workshop environment
",
+ "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 www.grants.gov.",
"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
new file mode 100644
index 000000000..adda7d368
--- /dev/null
+++ 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 (
+
+ {title}
+
+
+
+ );
+};
+
+export default PageSEO;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 16848dd7e..1bdb2a47b 100644
--- 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 (
<>
+
{
+ return {
+ __esModule: true,
+ default: ({ children }: { children: Array }) => {
+ return <>{children};
+ },
+ };
+});
+
+describe("PageSEO", () => {
+ it("Renders title without errors", () => {
+ const props = { title: "test title", description: "test description" };
+ render();
+ 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();
+ 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();
+ const title = screen.getByText("test title");
+ expect(title).toBeInTheDocument();
+ rerender();
+ const oldTitle = screen.queryByText("test title");
+ const updatedtitle = screen.getByText("updated test title");
+ expect(oldTitle).not.toBeInTheDocument();
+ expect(updatedtitle).toBeInTheDocument();
+ });
+});