No sé cuál es exactamente el problema, pero mi SEO en NextJS no funciona debido a process.browser , pero solía hacer que mi sitio respondiera. Sin embargo, cuando lo elimino, SEO funciona bien y el depurador de Facebook puede extraer mientras que con process.browser no es capaz de extraer
No lo sé, pero cuando process.browser el proceso. navegador, los estilos no se cargan para la vista móvil (ya se completó la configuración de los componentes con estilo con la ayuda de esto )
Las metaetiquetas se muestran en las herramientas de desarrollo, pero no están disponibles en la carpeta de build . Además, cuando process.browser , genera metaetiquetas y también está disponible en páginas html dentro de la carpeta de build y también funciona bien con el depurador de Facebook.
Para iniciar el servidor de desarrollo: yarn dev o npm run dev Para construir: use yarn build o npm build
Caja de arena: [ Enlace ]
Gracias por adelantado :)
_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(); } } }