Meta Data in Head not validating for OG (+ Twitter Cards)
Unanswered
American Curl posted this in #help-forum
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
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.
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
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.
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.
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;
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.