Next.js Discord

Discord Forum
Presumably Twitter and any OG validators are not able to see my static page content as the browser does. I am totally baffled about what to do. The Vercel build tells me the page in question is static.","dateCreated":"2024-03-09T18:44:12.000Z","answerCount":3,"author":{"@type":"Person","name":"American Curl"},"suggestedAnswer":{"@type":"Answer","text":"You need to pass the meta tag from _document.jsx, this way it will be created on the server and sent on the initial page load.","url":"https://nextjs-forum.com/post/1216094204367863818#message-1216096321455259740","dateCreated":"2024-03-09T18:52:37.000Z","author":{"@type":"Person","name":"Eurasian Woodcock"}}}}

Meta Data in Head not validating for OG (+ Twitter Cards)

Unanswered
American Curl posted this in #help-forum
Open in Discord
Avatar
American CurlOP
If you view my deployed home page: https://www.twtr.site/ and inspect source you will see the head does contain the correct meta tags. This is good.

Now if I run curl https://www.twtr.site/ -L I receive different head content:

<head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>TWTR<!-- --> on Solana</title><meta name="next-head-count" content="3"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="preload" href="/_next/static/css/a0f06105d34d2e41.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/a0f06105d34d2e41.css" crossorigin="" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-f4d5f1df4bd632f3.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-a4b9f4216022cc2d.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-d5ba0144e9c3dd6b.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-040673c18a01d60d.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/406-e790c5c30f886f4b.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/68-646a8d076439af5f.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/index-155064b05a758b87.js" defer="" crossorigin=""></script><script src="/_next/static/RKjhbze4PxP7tRegbx8as/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/RKjhbze4PxP7tRegbx8as/_ssgManifest.js" defer="" crossorigin=""></script></head>

Presumably Twitter and any OG validators are not able to see my static page content as the browser does. I am totally baffled about what to do. The Vercel build tells me the page in question is static.

3 Replies

Avatar
Eurasian Woodcock
You need to pass the meta tag from _document.jsx, this way it will be created on the server and sent on the initial page load.
Avatar
American CurlOP
Oh dang. Ok. For page specific tags, how can I define these?

I added tags to the _app.tsx and tested those with a validator. That works fine. Now for page specific tags, I would want to define those on each page. I looked up _document.tsx and found that I can define them there instead of _app.tsx as you suggested, but not sure how I can make use of the page specific tags. 


// src/pages/_app.tsx
import { AppProps } from 'next/app';
import Head from 'next/head';
import { FC } from 'react';
import { ContextProvider } from '../contexts/ContextProvider';
import { AppBar } from '../components/AppBar';
import { ContentContainer } from '../components/ContentContainer';
import { Footer } from '../components/Footer';
import Notifications from '../components/Notification'
import Banner from '../components/Banner'
import config from "../../config";
import { Analytics } from "@vercel/analytics/react"
require('@solana/wallet-adapter-react-ui/styles.css');
require('../styles/globals.css');


const App: FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <>
      <Head>
        <title>{config.TICKER} on Solana</title>
        <meta name="description" content="Bring tht bird back!" />
        <meta property="og:url" content="https://www.twtr.site/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="TWTR on Solana" />
        <meta property="og:description" content="Bring tht bird back!" />
        <meta property="og:image" content="https://www.twtr.site/birb-cooking.png" />


        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@TW1TTERonSOL" />
        <meta name="twitter:creator" content="@TW1TTERonSOL" />

        <meta property="twitter:domain" content="twtr.site" />
        <meta property="twitter:url" content="https://www.twtr.site/" />
        <meta name="twitter:title" content="TWTR on Solana" />
        <meta name="twitter:description" content="Bring tht bird back!" />
        <meta name="twitter:image" content="https://www.twtr.site/birb-cooking.png" />
      </Head>

      <ContextProvider>
        <Analytics />
        <div className="flex flex-col h-screen">
          <Notifications />
          <AppBar />
          <Banner />

          <ContentContainer>
            <Component {...pageProps} />
            <Footer />
          </ContentContainer>
        </div>
      </ContextProvider>
    </>
  );
};

export default App;


// src/pages/index.tsx
import type { NextPage } from "next";
import Head from "next/head";
import { HomeView } from "../views";

const Home: NextPage = () => {
  return (
    <div className="">
      <Head>
        <title>TWTR on Solana</title>
        {/* Override the _app.tsx meta tags ??? */}
        <meta name="description" content="Bring tht bird back!" />
        <meta property="og:url" content="https://www.twtr.site/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="TWTR on Solana" />
        <meta property="og:description" content="Bring tht bird back!" />
        <meta property="og:image" content="https://www.twtr.site/birb-cooking.png" />


        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@TW1TTERonSOL" />
        <meta name="twitter:creator" content="@TW1TTERonSOL" />

        <meta property="twitter:domain" content="twtr.site" />
        <meta property="twitter:url" content="https://www.twtr.site/" />
        <meta name="twitter:title" content="TWTR on Solana" />
        <meta name="twitter:description" content="Bring tht bird back!" />
        <meta name="twitter:image" content="https://www.twtr.site/birb-cooking.png" />
      </Head>

      <HomeView files={[]} />

    </div>
  );
};

export default Home;
Avatar
Eurasian Woodcock
Create a utility function getMeta(pathname) and use it in _document.jsx, pass pathname as param and this function will return meta as per current pathname.