Skip to content

Add SEO component to pages and remove inline meta tags for improved SEO management #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Add SEO component to pages and remove inline meta tags for improved SEO management #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5f7525
Add SEO component to pages and remove inline meta tags for improved S…
mattgianni Apr 14, 2025
04fdac8
Update src/components/SEO.tsx
mattgianni Apr 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions src/components/SEO.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// src/components/SEO.tsx
import Head from "next/head";
import { useRouter } from "next/router";

interface SEOProps {
title?: string;
description?: string;
imageUrl?: string;
url?: string; // Optional override
}

const SEO: React.FC<SEOProps> = ({
title = "Support SF Schools - Explore local volunteer and donation opportunities",
description = "A website to explore local schools and their available donation and volunteer opportunities.",
imageUrl = "https://supportsfschools.org/SocialPreview.png",
url, // Optional override
}) => {
const router = useRouter();

// Generate full URL for the current page
const baseUrl = "https://www.supportsfschools.org";
const canonicalUrl = url || `${baseUrl}${router.asPath}`;

return (
<Head>
{/* Basic metadata */}
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />

{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />

{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="supportsfschools.org" />
<meta property="twitter:url" content={canonicalUrl} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={imageUrl} />
</Head>
);
};

export default SEO;
42 changes: 1 addition & 41 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,48 +17,8 @@ class MyDocument extends Document {
rel="icon"
href="https://www.supportsfschools.org/logo_icon.ico"
/>
{/*<!-- HTML Meta Tags -->*/}
<meta
name="description"
content="A website to explore local schools and their available donation and volunteer opportunuities."
/>

{/*<!-- Facebook Meta Tags -->*/}
<meta property="og:url" content="https://www.supportsfschools.org/" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="Supprt SF Schools-Explore local volunteer and donating opportunities"
/>
<meta
property="og:description"
content="A website to explore local schools and their available donation and volunteer opportunuities."
/>
<meta
property="og:image"
content="https://supportsfschools.org/SocialPreview.png"
/>

{/*<!-- Twitter Meta Tags -->*/}
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="supportsfschools.org" />
<meta
property="twitter:url"
content="https://www.supportsfschools.org/"
/>
<meta
name="twitter:title"
content="Supprt SF Schools-Explore local volunteer and donating opportunities"
/>
<meta
name="twitter:description"
content="A website to explore local schools and their available donation and volunteer opportunuities."
/>
<meta
name="twitter:image"
content="https://supportsfschools.org/SocialPreview.png"
/>

{/* Plausible Analytics */}
<script
defer
data-domain="supportsfschools.org"
Expand Down
254 changes: 133 additions & 121 deletions src/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Image from "next/image";
import ContactUs from "../components/ContactUs";
import { useState } from "react";
import { blurDataURL } from "@/lib/imageConfig";
import SEO from "@/components/SEO";

const member_list = [
{
Expand Down Expand Up @@ -85,133 +86,144 @@ const About = () => {
const handleClose = () => setShowContactForm(false);

return (
<main>
<div className="flex flex-col items-center gap-8 bg-[#88B6FF] py-8 md:px-36">
<h1 className="text-center text-4xl font-medium max-lg:text-3xl max-md:text-2xl">
Hello! We&apos;re Support SF Schools
</h1>
<Image
src="/about-graphic.png"
alt="Arrow Icon"
className="w-10/12 lg:w-6/12"
width={240}
height={240}
/>
</div>
<div className="mx-auto flex max-md:px-8 md:w-5/6 lg:w-4/6">
<div className="flex flex-col items-center gap-4 py-8 md:py-12">
<div className="flex flex-col gap-4 max-md:text-sm">
<p>
Support SF Schools is run by an all-volunteer team at{" "}
<a
href="https://www.sfcivictech.org/about"
target="_blank"
className="text-blue-500 hover:underline"
>
SF Civic Tech
</a>{" "}
(formerly known as Code for San Francisco). Our diverse group of
teachers, designers, engineers, researchers, and curious community
members is building this website to make it easier for people who
live, work, and hang out in San Francisco to support our public
schools.
</p>
<p>
We are focused on building strong communities and neighborhoods,
where people who live nearby a school can support and be part of
the school community, even if they aren’t parents of current
students. We have talked to hundreds of people who live in San
Francisco, who are willing to volunteer and support local schools,
and who wish they were more connected to the schools in their
neighborhoods.
</p>
<p>
People who work in tech and want to volunteer in STEM education.
Former teachers who are trying out new careers but still looking
to feel a connection to local schools. Parents who still live in
the neighborhood after their kids graduated and have free time to
volunteer. Alumni who are back in San Francisco and want to
reconnect with schools. People from all backgrounds who believe in
the power of education to change lives. Support SFUSD is designed
to bring them closer to the schools in their neighborhood, while
helping meet school needs.
</p>
<p>
This website is in beta and is a work in progress. Our beta
focuses on connecting folks to the seventeen public high schools
in the school district. We are open to feedback and always looking
for volunteers to join our effort. We meet Wednesday evenings on
Zoom.
</p>
</div>
<>
<SEO
title="Support SF Schools - About"
description="Support SF Schools is a diverse group of
teachers, designers, engineers, researchers, and curious
community members dedicated to making it easier for
people who live, work, and hang out in San Francisco to support
our public schools."
/>
<main>
<div className="flex flex-col items-center gap-8 bg-[#88B6FF] py-8 md:px-36">
<h1 className="text-center text-4xl font-medium max-lg:text-3xl max-md:text-2xl">
Hello! We&apos;re Support SF Schools
</h1>
<Image
src="/about-graphic.png"
alt="Arrow Icon"
className="w-10/12 lg:w-6/12"
width={240}
height={240}
/>
</div>
<div className="mx-auto flex max-md:px-8 md:w-5/6 lg:w-4/6">
<div className="flex flex-col items-center gap-4 py-8 md:py-12">
<div className="flex flex-col gap-4 max-md:text-sm">
<p>
Support SF Schools is run by an all-volunteer team at{" "}
<a
href="https://www.sfcivictech.org/about"
target="_blank"
className="text-blue-500 hover:underline"
>
SF Civic Tech
</a>{" "}
(formerly known as Code for San Francisco). Our diverse group of
teachers, designers, engineers, researchers, and curious
community members is building this website to make it easier for
people who live, work, and hang out in San Francisco to support
our public schools.
</p>
<p>
We are focused on building strong communities and neighborhoods,
where people who live nearby a school can support and be part of
the school community, even if they aren’t parents of current
students. We have talked to hundreds of people who live in San
Francisco, who are willing to volunteer and support local
schools, and who wish they were more connected to the schools in
their neighborhoods.
</p>
<p>
People who work in tech and want to volunteer in STEM education.
Former teachers who are trying out new careers but still looking
to feel a connection to local schools. Parents who still live in
the neighborhood after their kids graduated and have free time
to volunteer. Alumni who are back in San Francisco and want to
reconnect with schools. People from all backgrounds who believe
in the power of education to change lives. Support SFUSD is
designed to bring them closer to the schools in their
neighborhood, while helping meet school needs.
</p>
<p>
This website is in beta and is a work in progress. Our beta
focuses on connecting folks to the seventeen public high schools
in the school district. We are open to feedback and always
looking for volunteers to join our effort. We meet Wednesday
evenings on Zoom.
</p>
</div>

<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-8">
{member_list.map((member) => (
<a
href={member.url}
target="_blank"
className={
"group flex justify-center" +
(!member.url ? " cursor-default" : "")
}
key={member.name}
onClick={(e) => {
if (!member.url) {
e.preventDefault();
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 lg:gap-8">
{member_list.map((member) => (
<a
href={member.url}
target="_blank"
className={
"group flex justify-center" +
(!member.url ? " cursor-default" : "")
}
}}
>
<div className="w-36 text-sm">
{member.img ? (
<Image
src={member.img}
alt={`${member.name} photo`}
key={member.name}
onClick={(e) => {
if (!member.url) {
e.preventDefault();
}
}}
>
<div className="w-36 text-sm">
{member.img ? (
<Image
src={member.img}
alt={`${member.name} photo`}
className={
"mb-2 rounded-lg rounded-tl-[36px]" +
(member.url
? " outline-none outline-offset-[-4px] transition-all group-hover:outline-2 group-hover:outline-offset-2 group-hover:outline-black"
: "")
}
width={1000}
height={1000}
placeholder="blur"
blurDataURL={blurDataURL}
/>
) : (
<div className="mb-2 aspect-square w-full rounded-lg rounded-tl-[36px] bg-black"></div>
)}

<p
className={
"mb-2 rounded-lg rounded-tl-[36px]" +
(member.url
? " outline-none outline-offset-[-4px] transition-all group-hover:outline-2 group-hover:outline-offset-2 group-hover:outline-black"
: "")
"font-bold " +
(member.url ? "group-hover:underline" : "")
}
width={1000}
height={1000}
placeholder="blur"
blurDataURL={blurDataURL}
/>
) : (
<div className="mb-2 aspect-square w-full rounded-lg rounded-tl-[36px] bg-black"></div>
)}

<p
className={
"font-bold " + (member.url ? "group-hover:underline" : "")
}
>
{member.name}
</p>
<p className="font-medium">{member.role}</p>
</div>
</a>
))}
</div>
<div>
<h2 className="text-center text-lg font-medium text-[#8338EC] md:text-xl">
With thanks to the following folks for their past contribution
</h2>
<p className="text-center font-bold text-[#3A86FF] max-md:text-sm">
Hamilton Truong, Megan Vyenielo, Louis Kim, Joshua Lee, Bruna Lee,
PJ Ekhator, Bai Pai, Liv Cornfield, Kimberly Kono
</p>
>
{member.name}
</p>
<p className="font-medium">{member.role}</p>
</div>
</a>
))}
</div>
<div>
<h2 className="text-center text-lg font-medium text-[#8338EC] md:text-xl">
With thanks to the following folks for their past contribution
</h2>
<p className="text-center font-bold text-[#3A86FF] max-md:text-sm">
Hamilton Truong, Megan Vyenielo, Louis Kim, Joshua Lee, Bruna
Lee, PJ Ekhator, Bai Pai, Liv Cornfield, Kimberly Kono
</p>
</div>
<button
onClick={handleOpen}
className="text-blue-500 hover:underline"
>
Contact Us
</button>
{showContactForm && <ContactUs handleClose={handleClose} />}
</div>
<button
onClick={handleOpen}
className="text-blue-500 hover:underline"
>
Contact Us
</button>
{showContactForm && <ContactUs handleClose={handleClose} />}
</div>
</div>
</main>
</main>
</>
);
};

Expand Down
2 changes: 2 additions & 0 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Image from "next/image";
import { useRouter } from "next/router";
import SEO from "@/components/SEO";

export default function Home() {
const router = useRouter();
Expand All @@ -10,6 +11,7 @@ export default function Home() {

return (
<>
<SEO title="Support SF Schools - Home" />
<main className="relative flex h-full flex-row justify-between p-4">
<section className="md:mt-50 mt-8 flex flex-1 flex-col items-center gap-8 md:justify-start lg:gap-11">
<header className="text-center">
Expand Down
Loading