fix: better meta tags for pages

2026-04-24 03:00:09 -04:00 · 2022-01-27 20:47:47 +05:30
parent 573a294d3f
commit d942ebba90
16 changed files with 91 additions and 79 deletions
--- a/packages/web/components/Seo.tsx
+++ b/packages/web/components/Seo.tsx
@@ -9,32 +9,44 @@ export type HeadMetaProps = {
 };

 export const HeadComponent: React.FC<HeadMetaProps> = ({
-  title = '𝗠eta𝗚ame',
+  title = 'MetaGame',
  description = 'MetaGame is a Massive Online Coordination Game! MetaGame is any approach to a game that transcends or operates outside of the prescribed rules of the game, uses external factors to affect the game, or goes beyond the supposed limits or environment set by the game.',
  url = 'https://my.metagame.wtf/',
  img = 'https://my.metagame.wtf/_next/image?url=%2Fassets%2Flogo.png&w=1920&q=75',
 }) => (
  <Head>
    <title>{title}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="title" content={title} />
-    <meta name="description" content={description} />
-    <meta name="theme-color" content="#5a32e6" />
+    <meta
+      name="viewport"
+      property="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta name="title" property="title" content={title} />
+    <meta name="description" property="description" content={description} />
+    <meta name="theme-color" property="theme-color" content="#5a32e6" />

-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="MetaGame" />
-    <meta property="og:locale" content="en_US" />
+    <meta name="og:type" property="og:type" content="website" />
+    <meta name="og:site_name" property="og:site_name" content="MetaGame" />
+    <meta name="og:locale" property="og:locale" content="en_US" />

-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:url" content={url} />
-    <meta property="og:image" content={img} />
+    <meta name="og:title" property="og:title" content={title} />
+    <meta
+      name="og:description"
+      property="og:description"
+      content={description}
+    />
+    <meta name="og:url" property="og:url" content={url} />
+    <meta name="og:image" property="og:image" content={img} />

-    <meta property="twitter:card" content="summary" />
-    <meta property="twitter:url" content={url} />
-    <meta property="twitter:site" content="@MetaFam" />
-    <meta property="twitter:title" content={title} />
-    <meta property="twitter:description" content={description} />
-    <meta property="twitter:image" content={img} />
+    <meta name="twitter:card" property="twitter:card" content="summary" />
+    <meta name="twitter:url" property="twitter:url" content={url} />
+    <meta name="twitter:site" property="twitter:site" content="@MetaFam" />
+    <meta name="twitter:title" property="twitter:title" content={title} />
+    <meta
+      name="twitter:description"
+      property="twitter:description"
+      content={description}
+    />
+    <meta name="twitter:image" property="twitter:image" content={img} />
  </Head>
 );
--- a/packages/web/pages/community/events.tsx
+++ b/packages/web/pages/community/events.tsx
@@ -1,21 +1,20 @@
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const EventsPage: React.FC = () => (
  <PageContainer p={0} position="fixed">
    <HeadComponent
-      title={`Events`}
+      title="MetaGame Events"
      description={descriptions.events}
      url={`https://wiki.metagame.wtf/docs/great-houses/house-of-daos`}
    />
    <iframe
-      title="MetaWiki"
+      title="MetaGame Events"
      src="https://wiki.metagame.wtf/docs/great-houses/house-of-daos"
      style={{
-        width: `100%`,
+        width: '100%',
        height: '100%',
      }}
    />
--- a/packages/web/pages/community/guilds.tsx
+++ b/packages/web/pages/community/guilds.tsx
@@ -20,7 +20,7 @@ export const getStaticProps = async () => {
 const GuildsPage: React.FC<Props> = ({ guilds }) => (
  <PageContainer>
    <HeadComponent
-      title="MetaGame’s Guilds"
+      title="MetaGame Guilds"
      description="MetaGame is a Massive Online Coordination Game! Guilds participating in MetaGame…."
      url="https://my.metagame.wtf/community/guilds"
    />
--- a/packages/web/pages/community/patrons.tsx
+++ b/packages/web/pages/community/patrons.tsx
@@ -20,7 +20,7 @@ export const getStaticProps = async () => {
 const PatronsPage: React.FC<Props> = ({ patrons }) => (
  <PageContainer>
    <HeadComponent
-      title="MetaGame’s Patrons"
+      title="MetaGame Patrons"
      description="MetaGame is a Massive Online Coordination Game! MetaGame’s Patrons enable us to succeed by helping us with funds."
      url="https://my.metagame.wtf/community/patrons"
    />
--- a/packages/web/pages/dashboard.tsx
+++ b/packages/web/pages/dashboard.tsx
@@ -16,6 +16,7 @@ import { LatestContent } from 'components/Dashboard/LatestContent';
 import { Leaderboard } from 'components/Dashboard/Leaderboard';
 import { Seed } from 'components/Dashboard/Seed';
 import { XP } from 'components/Dashboard/XP';
+import { HeadComponent } from 'components/Seo';
 import { ReactElement, useEffect, useState } from 'react';
 import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';

@@ -38,6 +39,7 @@ export const originalLayouts = getFromLS('layouts') || initLayouts;

 const Dashboard = (): ReactElement => (
  <PageContainer>
+    <HeadComponent title="MetaGame Dashboard" />
    <Grid />
  </PageContainer>
 );
--- a/packages/web/pages/guild/[guildname].tsx
+++ b/packages/web/pages/guild/[guildname].tsx
@@ -62,6 +62,12 @@ const GuildPage: React.FC<Props> = ({ guild }) => {

  return (
    <PageContainer p={0}>
+      <HeadComponent
+        title={`MetaGame Guild Profile: ${guild.name}`}
+        description={`${(guild.description ?? '').replace('\n', ' ')}`}
+        url={`https://my.metagame.wtf/guild/${guild.guildname}`}
+        img={`${guild.logo}`}
+      />
      <Box
        background={`url(${getGuildCoverImageFull()}) no-repeat`}
        bgSize="cover"
@@ -81,12 +87,6 @@ const GuildPage: React.FC<Props> = ({ guild }) => {
        align="center"
        zIndex={1}
      >
-        <HeadComponent
-          title={guild.name}
-          description={`${guild.description}`}
-          url={`https://my.metagame.wtf/guild/${guild.guildname}`}
-          img={`${guild.logo}`}
-        />
        <Flex
          align="center"
          direction={{ base: 'column', md: 'row' }}
--- a/packages/web/pages/invest/becomeapatron.tsx
+++ b/packages/web/pages/invest/becomeapatron.tsx
@@ -1,21 +1,20 @@
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const BecomeAPatronPage: React.FC = () => (
  <PageContainer p={0} position="fixed">
    <HeadComponent
-      title={`Become a Patron`}
+      title="MetaGame: Become a Patron"
      description={descriptions.becomeapatron}
      url="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
    />
    <iframe
-      title="MetaWiki"
+      title="MetaGame: Become a Patron"
      src="https://wiki.metagame.wtf/docs/enter-metagame/why-patron"
      style={{
-        width: `100%`,
+        width: '100%',
        height: '100%',
      }}
    />
--- a/packages/web/pages/invest/buyseeds.tsx
+++ b/packages/web/pages/invest/buyseeds.tsx
@@ -2,8 +2,7 @@ import { LoadingState } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React, { useState } from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const BuySeedsPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
@@ -12,16 +11,16 @@ const BuySeedsPage: React.FC = () => {
    <PageContainer p={0} position="fixed">
      {loading && <LoadingState position="absolute" />}
      <HeadComponent
-        title={`Buy Seeds`}
+        title="MetaGame: Buy Seeds"
        description={descriptions.buyseeds}
        url="https://polygon.balancer.fi/#/trade"
      />
      <iframe
-        title="Buy Seeds"
+        title="MetaGame: Buy Seeds"
        src="https://polygon.balancer.fi/#/trade"
        onLoad={() => setLoading(false)}
        style={{
-          width: `100%`,
+          width: '100%',
          height: '100%',
        }}
      />
--- a/packages/web/pages/invest/grants.tsx
+++ b/packages/web/pages/invest/grants.tsx
@@ -2,8 +2,7 @@ import { LoadingState } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React, { useState } from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const GrantsPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
@@ -12,16 +11,16 @@ const GrantsPage: React.FC = () => {
    <PageContainer p={0} position="fixed">
      {loading && <LoadingState position="absolute" />}
      <HeadComponent
-        title={`Support Grants`}
+        title="MetaGame: Support Grants"
        description={descriptions.grants}
        url="https://giveth.io/"
      />
      <iframe
-        title="Support Grants"
+        title="MetaGame: Support Grants"
        src="https://giveth.io/"
        onLoad={() => setLoading(false)}
        style={{
-          width: `100%`,
+          width: '100%',
          height: '100%',
        }}
      />
--- a/packages/web/pages/invest/plantseeds.tsx
+++ b/packages/web/pages/invest/plantseeds.tsx
@@ -2,8 +2,7 @@ import { LoadingState } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React, { useState } from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const PlantSeedsPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
@@ -12,16 +11,16 @@ const PlantSeedsPage: React.FC = () => {
    <PageContainer p={0} position="fixed">
      {loading && <LoadingState position="absolute" />}
      <HeadComponent
-        title={`Plant Seeds`}
+        title="MetaGame: Plant Seeds"
        description={descriptions.plantseeds}
        url="https://polygon.balancer.fi/#/pool/0x8a8fcd351ed553fc75aecbc566a32f94471f302e000100000000000000000081/invest"
      />
      <iframe
-        title="Plant Seeds"
+        title="MetaGame: Plant Seeds"
        src="https://polygon.balancer.fi/#/pool/0x8a8fcd351ed553fc75aecbc566a32f94471f302e000100000000000000000081/invest"
        onLoad={() => setLoading(false)}
        style={{
-          width: `100%`,
+          width: '100%',
          height: '100%',
        }}
      />
--- a/packages/web/pages/learn/metaradio.tsx
+++ b/packages/web/pages/learn/metaradio.tsx
@@ -2,26 +2,25 @@ import { LoadingState } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React, { useState } from 'react';
+import { descriptions } from 'utils/menuLinks';

-import { descriptions } from '../../utils/menuLinks';
-
-const ForumPage: React.FC = () => {
+const MetaRadioPage: React.FC = () => {
  const [loading, setLoading] = useState(true);

  return (
    <PageContainer p={0} position="fixed">
      {loading && <LoadingState position="absolute" />}
      <HeadComponent
-        title={`MetaRadio`}
+        title="MetaRadio by MetaFam"
        description={descriptions.metaradio}
        url="https://anchor.fm/MetaGame/"
      />
      <iframe
-        title="MetaRadio"
+        title="MetaRadio by MetaFam"
        src="https://anchor.fm/MetaGame/"
        onLoad={() => setLoading(false)}
        style={{
-          width: `100%`,
+          width: '100%',
          height: '100%',
        }}
      />
@@ -29,4 +28,4 @@ const ForumPage: React.FC = () => {
  );
 };

-export default ForumPage;
+export default MetaRadioPage;
--- a/packages/web/pages/learn/playbooks.tsx
+++ b/packages/web/pages/learn/playbooks.tsx
@@ -1,21 +1,20 @@
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const PlaybooksPage: React.FC = () => (
  <PageContainer p={0} position="fixed">
    <HeadComponent
-      title={`Playbooks`}
+      title="MetaGame Playbooks"
      description={descriptions.playbooks}
      url="https://wiki.metagame.wtf/docs/playbooks/browse"
    />
    <iframe
-      title="MetaWiki"
+      title="MetaGame Playbooks"
      src="https://wiki.metagame.wtf/docs/playbooks/browse"
      style={{
-        width: `100%`,
+        width: '100%',
        height: '100%',
      }}
    />
--- a/packages/web/pages/learn/thegreathouses.tsx
+++ b/packages/web/pages/learn/thegreathouses.tsx
@@ -1,21 +1,20 @@
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React from 'react';
-
-import { descriptions } from '../../utils/menuLinks';
+import { descriptions } from 'utils/menuLinks';

 const TheGreatHousesPage: React.FC = () => (
  <PageContainer p={0} position="fixed">
    <HeadComponent
-      title={`The Great Houses`}
+      title="The Great Houses of MetaGame"
      description={descriptions.thegreathouses}
      url="https://wiki.metagame.wtf/docs/great-houses/house-of-daos/"
    />
    <iframe
-      title="MetaWiki"
+      title="The Great Houses of MetaGame"
      src="https://wiki.metagame.wtf/docs/great-houses/house-of-daos/"
      style={{
-        width: `100%`,
+        width: '100%',
        height: '100%',
      }}
    />
--- a/packages/web/pages/learn/wiki.tsx
+++ b/packages/web/pages/learn/wiki.tsx
@@ -1,25 +1,24 @@
 import { PageContainer } from 'components/Container';
 import { HeadComponent } from 'components/Seo';
 import React from 'react';
+import { descriptions } from 'utils/menuLinks';

-import { descriptions } from '../../utils/menuLinks';
-
-const ForumPage: React.FC = () => (
+const WikiPage: React.FC = () => (
  <PageContainer p={0} position="fixed">
    <HeadComponent
-      title={`Events`}
+      title="MetaGame Wiki"
      description={descriptions.forum}
      url="https://wiki.metagame.wtf/docs/wtf-is-metagame/wtf-is-metagame"
    />
    <iframe
-      title="MetaWiki"
+      title="MetaGame Wiki"
      src="https://wiki.metagame.wtf/docs/wtf-is-metagame/wtf-is-metagame"
      style={{
-        width: `100%`,
+        width: '100%',
        height: '100%',
      }}
    />
  </PageContainer>
 );

-export default ForumPage;
+export default WikiPage;
--- a/packages/web/pages/player/[username].tsx
+++ b/packages/web/pages/player/[username].tsx
@@ -7,6 +7,7 @@ import {
  DeleteIcon,
  EditIcon,
  Flex,
+  LoadingState,
  MetaButton,
  ResponsiveText,
  useToast,
@@ -37,7 +38,7 @@ import {
  GetStaticPropsContext,
  InferGetStaticPropsType,
 } from 'next';
-import Error from 'next/error';
+import { useRouter } from 'next/router';
 import Page404 from 'pages/404';
 import {
  ReactElement,
@@ -70,12 +71,18 @@ export const PlayerPage: React.FC<Props> = ({
  player,
  personalityInfo,
 }): ReactElement => {
-  if (!player) return <Error statusCode={404} />;
+  const router = useRouter();
+
+  if (router.isFallback) {
+    return <LoadingState />;
+  }
+
+  if (!player) return <Page404 />;

  return (
    <PageContainer pt={0} px={[0, 4, 8]}>
      <HeadComponent
-        title={`MetaGame Profile: ${getPlayerName(player)}`}
+        title={`MetaGame Player Profile: ${getPlayerName(player)}`}
        description={(getPlayerDescription(player) ?? '').replace('\n', ' ')}
        url={getPlayerURL(player, { rel: false })}
        img={getPlayerImage(player)}
--- a/packages/web/pages/quests.tsx
+++ b/packages/web/pages/quests.tsx
@@ -55,7 +55,7 @@ const QuestsPage: React.FC<Props> = () => {
  return (
    <PageContainer>
      <HeadComponent
-        title="MetaGame’s Quests"
+        title="MetaGame Quests"
        description="MetaGame is a Massive Online Coordination Game! MetaGame has some epic quests going on!"
        url="https://my.metagame.wtf/quests"
      />