Add better SEO

This commit is contained in:
Liam 2022-10-21 10:56:50 +01:00
parent 8e607cda18
commit 792c92c526
4 changed files with 81 additions and 71 deletions

View File

@ -1,5 +1,5 @@
import { createTheme, NextUIProvider } from "@nextui-org/react";
import { NextSeo } from "next-seo";
import { DefaultSeo } from "next-seo";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import "../styles/globals.css";
@ -19,38 +19,40 @@ const darkTheme = createTheme({
function MyApp({ Component, pageProps }) {
return (
<NextThemesProvider
storageKey="theme"
attribute="class"
value={{
dark: darkTheme,
light: lightTheme,
}}
>
<NextUIProvider>
<NextSeo
title={process.env.NEXT_PUBLIC_SITE_NAME}
description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
openGraph={{
url: process.env.NEXT_PUBLIC_SITE_URL,
title: process.env.NEXT_PUBLIC_SITE_NAME,
description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
site_name: process.env.NEXT_PUBLIC_SITE_NAME,
images: [
{
url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true",
alt: "Site Example",
},
],
}}
twitter={{
cardType: "summary_large_image",
site: "@BeatSaber Overlay",
}}
/>
<Component {...pageProps} />
</NextUIProvider>
</NextThemesProvider>
<>
<DefaultSeo
titleTemplate={`${process.env.NEXT_PUBLIC_SITE_NAME} | %s`}
description={process.env.NEXT_PUBLIC_SITE_DESCRIPTION}
openGraph={{
url: process.env.NEXT_PUBLIC_SITE_URL,
title: process.env.NEXT_PUBLIC_SITE_NAME,
description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
site_name: process.env.NEXT_PUBLIC_SITE_NAME,
images: [
{
url: "https://cdn.fascinated.cc/fHknFPctAC.png?raw=true",
alt: "Site Example",
},
],
}}
twitter={{
cardType: "summary_large_image",
site: "@BeatSaber Overlay",
}}
/>
<NextThemesProvider
storageKey="theme"
attribute="class"
value={{
dark: darkTheme,
light: lightTheme,
}}
>
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
</NextThemesProvider>
</>
);
}

View File

@ -16,6 +16,7 @@ class MyDocument extends Document {
<Html lang="en">
<Head>
{CssBaseline.flush()}
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"

View File

@ -18,6 +18,7 @@ import NavBar from "../src/components/Navbar";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { NextSeo } from "next-seo";
import Utils from "../src/utils/utils";
import styles from "../styles/main.module.css";
@ -152,6 +153,8 @@ export default class Home extends Component {
<div className={styles.main}>
<NavBar avatarUrl={this.state.avatarUrl}></NavBar>
<NextSeo title="Builder"></NextSeo>
<Container
css={{
marginTop: "$8",

View File

@ -1,4 +1,5 @@
import { Link, Spinner } from "@nextui-org/react";
import { NextSeo } from "next-seo";
import { Component } from "react";
import PlayerStats from "../src/components/PlayerStats";
import ScoreStats from "../src/components/ScoreStats";
@ -437,44 +438,47 @@ export default class Overlay extends Component {
}
return (
<div className={styles.main}>
{!isValidSteamId ? (
<div className={styles.invalidPlayer}>
<h1>Invalid player, please visit the main page.</h1>
<Link href="/">
<a>Go Home</a>
</Link>
</div>
) : (
<div className={styles.overlay}>
{showPlayerStats && !loadingPlayerData ? (
<PlayerStats
pp={data.pp.toLocaleString()}
globalPos={data.rank.toLocaleString()}
country={data.country}
countryRank={data.countryRank.toLocaleString()}
websiteType={websiteType}
avatar={`/api/steamavatar?steamid=${id}`}
loadedDuringSong={this.state.loadedDuringSong}
/>
) : (
<></>
)}
{this.state.showScore && this.state.isVisible ? (
<ScoreStats data={this.state} />
) : (
<></>
)}
{this.state.showSongInfo &&
this.state.beatSaverData !== undefined &&
this.state.isVisible ? (
<SongInfo data={this.state} />
) : (
<></>
)}
</div>
)}
</div>
<>
<NextSeo title="Overlay"></NextSeo>
<div className={styles.main}>
{!isValidSteamId ? (
<div className={styles.invalidPlayer}>
<h1>Invalid player, please visit the main page.</h1>
<Link href="/">
<a>Go Home</a>
</Link>
</div>
) : (
<div className={styles.overlay}>
{showPlayerStats && !loadingPlayerData ? (
<PlayerStats
pp={data.pp.toLocaleString()}
globalPos={data.rank.toLocaleString()}
country={data.country}
countryRank={data.countryRank.toLocaleString()}
websiteType={websiteType}
avatar={`/api/steamavatar?steamid=${id}`}
loadedDuringSong={this.state.loadedDuringSong}
/>
) : (
<></>
)}
{this.state.showScore && this.state.isVisible ? (
<ScoreStats data={this.state} />
) : (
<></>
)}
{this.state.showSongInfo &&
this.state.beatSaverData !== undefined &&
this.state.isVisible ? (
<SongInfo data={this.state} />
) : (
<></>
)}
</div>
)}
</div>
</>
);
}
}