Add SEO description and pages title (#317)

* add web description and pages title * change title --------- Co-authored-by: Thuy Pham <thuypham@Thuys-MacBook-Pro.local>
cornell-dti · Dec 1, 2023 · 9bcb3f1 · 9bcb3f1
1 parent 9547f90
commit 9bcb3f1
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 1 deletion.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -11,6 +11,8 @@
     <meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+    <meta name="keywords" content="cornell apartments, apartments at cornell, etc" />
+    <meta name="description" content="Cornell Apartments Finder for Off-campus Housing" />
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
@@ -31,7 +33,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>CUAPTS</title>
+    <title>CUAPTS - Cornell's Off-campus Housing Finder</title>
   </head>
 
   <body>

diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -3,6 +3,7 @@ import { Typography, makeStyles, Grid, Container } from '@material-ui/core';
 import { ReviewWithId } from '../../../common/types/db-types';
 import { get } from '../utils/call';
 import AdminReviewComponent from '../components/Admin/AdminReview';
+import { useTitle } from '../utils';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -24,6 +25,8 @@ const AdminPage = (): ReactElement => {
 
   const { container } = useStyles();
 
+  useTitle('Admin');
+
   // calls the APIs and the callback function to set the reviews for each review type
   useEffect(() => {
     const reviewTypes = new Map<string, React.Dispatch<React.SetStateAction<ReviewWithId[]>>>([

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -8,6 +8,7 @@ import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
 import { CardData } from '../App';
 import { get } from '../utils/call';
 import { loadingLength } from '../constants/HomeConsts';
+import { useTitle } from '../utils';
 
 const useStyles = makeStyles({
   jumboText: {
@@ -40,6 +41,8 @@ const HomePage = (): ReactElement => {
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [drawerOpen] = useState<boolean>(false);
 
+  useTitle('Home');
+
   useEffect(() => {
     get<returnData>(`/api/page-data/home/${loadingLength}`, {
       callback: setData,

diff --git a/frontend/src/pages/Policies.tsx b/frontend/src/pages/Policies.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { Container, Link, Typography, makeStyles } from '@material-ui/core';
 import { colors } from '../colors';
+import { useTitle } from '../utils';
 
 const useStyles = makeStyles(() => ({
   h2: {
@@ -42,6 +43,9 @@ const useStyles = makeStyles(() => ({
 
 const Policies = (): ReactElement => {
   const { h2, h3, h4, body, link } = useStyles();
+
+  useTitle('Policies');
+
   return (
     <Container maxWidth="lg">
       <Typography variant="h2" className={h2}>

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
@@ -12,6 +12,7 @@ import { colors } from '../colors';
 import questionIcon from '../assets/question.svg';
 import { signOut } from '../utils/firebase';
 import { useHistory } from 'react-router-dom';
+import { useTitle } from '../utils';
 
 type Props = {
   user: firebase.User | null;
@@ -144,6 +145,8 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
   const theme = useTheme();
   const isXsScreen = useMediaQuery(theme.breakpoints.down('xs'));
 
+  useTitle('Profile');
+
   /** This function opens the 'Who can view my profile?' modal **/
   const openModal = () => {
     setIsModalOpen(true);

diff --git a/frontend/src/pages/SearchResultsPage.tsx b/frontend/src/pages/SearchResultsPage.tsx
@@ -5,6 +5,7 @@ import { get } from '../utils/call';
 import { colors } from '../colors';
 import { CardData } from '../App';
 import ApartmentCards from '../components/ApartmentCard/ApartmentCards';
+import { useTitle } from '../utils';
 
 const useStyles = makeStyles({
   searchText: {
@@ -20,6 +21,8 @@ const SearchResultsPage = (): ReactElement => {
   const query = location.search.substring(3);
   const isMobile = useMediaQuery('(max-width:600px)');
 
+  useTitle('Search Result');
+
   useEffect(() => {
     get<CardData[]>(`/api/search-results?q=${query}`, {
       callback: setSearchResults,