I don't know what the issue exactly is but my SEO in NextJS is not working due to process.browser but it used to make my site responsive.However, when I remove it SEO works fine and facebook debugger is able to extract whereas with process.browser it is not able to extract
I don't know but when I remove the process.browser, Styles are not loaded for mobile view, (already completed the setup of Styled components with the help of this)
Meta tags are shown in dev tools but they are not available in build folder. Moreover when I remove process.browser it generate Meta tags and it is also available in html pages inside build folder and also works fine with facebook debugger
To start dev server: yarn dev or npm run dev To build: use yarn build or npm build
Sandbox: [Link]
Thanks in advance :)
_app.js
import "../styles/global.css";
import { useEffect, useState } from "react";
export default function App({ Component, pageProps }) {
return process.browser && <Component />;
}
import React, { useState } from "react";
import Head from "next/head";
import styled from "styled-components";
export default function Home() {
return (
<React.Fragment>
<Head>
<title>my site</title>
<meta name="title" content="my site" />
<meta name="description" content="my portfolio" />
<meta property="og:title" content="my site" />
<meta property="og:description" content="my portfolio" />
</Head>
</React.Fragment>
);
}
_document.js
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}