feat: added basic metadata with OpenGraph protocol

corp-0 · corp-0 · commit e823bb637913 · 2023-01-31T21:33:55.000-03:00
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -8,11 +8,39 @@ import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import '../styles/clown.css'
 import Clown from "../components/clown/clown";
+import Head from "next/head";
 config.autoAddCss = false
 
 function MyApp({Component, pageProps}: AppProps) {
     return (
         <>
+            <Head>
+                <meta charSet="UTF-8"/>
+                <meta name="keywords" content="unitystation, Space Station 13, SS13, Unity, RPG, Among us" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <title key='title'>Unitystation</title>
+                <meta
+                    key='description'
+                    name="description"
+                    content="Unitystation is a free and open-source multiplayer space station 13 remake built in Unity."
+                />
+                <meta
+                    key='og:title'
+                    property="og:title"
+                    content="Unitystation - The Space Station 13 Remake made in Unity"
+                />
+                <meta
+                    key='og:description'
+                    property="og:description"
+                    content="Unitystation is a free and open-source multiplayer space station 13 remake built in Unity."
+                />
+                <meta
+                    key='og:image'
+                    property="og:image"
+                    content="https://unitystationfile.b-cdn.net/Branding/headerCapsule.png"
+                />
+                <meta key="og:type" property="og:type" content="website"/>
+            </Head>
             <Background>
                 <Clown></Clown>
                 <Container>
diff --git a/pages/blog.tsx b/pages/blog.tsx
@@ -1,8 +1,10 @@
 import {NextPage} from "next";
-import FlexPageContainer from "../components/layout/prefabs/flexPageContainer";
 import {useEffect, useState} from "react";
 import Post from "../components/blog/post";
 import {BlogPostsResponse} from "../types/blogPostsResponse";
+import Head from "next/head";
+
+
 
 const Blog: NextPage = () => {
     const [posts, setPosts] = useState({} as BlogPostsResponse);
@@ -18,6 +20,24 @@ const Blog: NextPage = () => {
 
     return (
         <>
+            <Head>
+                <title key={'title'}>Unitystation - Blog</title>
+                <meta
+                    key='description'
+                    name='description'
+                    content='The Unitystation Blog is a place where we post about the development of Unitystation, our community, and other things related to the game!'
+                />
+                <meta
+                    key='og:title'
+                    property='og:title'
+                    content='Unitystation - Blog'
+                />
+                <meta
+                    key='og:description'
+                    property='og:description'
+                    content='The Unitystation Blog is a place where we post about the development of Unitystation, our community, and other things related to the game!'
+                />
+            </Head>
             <main className={'pt-8 pb-16 lg:pt-16 lg:pb-24'}>
                 <div className={'flex px-4 mx-auto max-w-screen-xl '}>
                     {!loading && <div>
diff --git a/pages/changelog.tsx b/pages/changelog.tsx
@@ -4,6 +4,8 @@ import FluidMainContainer from '../components/layout/prefabs/fixedFluidFixed/flu
 import ChangelogResultsPage from '../components/changelog/changelogResultsPage';
 import {AllChangesResponse} from '../types/allChangesResponse';
 import {useEffect, useState} from 'react';
+import Head from "next/head";
+
 
 
 const initialResponse: AllChangesResponse = {
@@ -41,6 +43,19 @@ const Changelog: NextPage = () => {
 
     return (
         <>
+            <Head>
+                <title key="title">Unitystation - Changelog</title>
+                <meta
+                    key="description"
+                    name="description"
+                    content="Find all the changes we have pushed to Unitystation here!"/>
+                <meta key="og:title" property="og:title" content="Unitystation - Changelog"/>
+                <meta
+                    key="og:description"
+                    property="og:description"
+                    content="Find all the changes we have pushed to Unitystation here!"/>
+                <meta key="og:url" property="og:url" content="https://unitystation.org/changelog"/>
+            </Head>
             <FlexPageContainer>
                 <FluidMainContainer>
                     <div className={'w-full flex flex-col items-center justify-center'}>
