Quiero hacer migas de pan basadas en microdatos y estoy usando nextjs con reactjs que hice:
<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index'} itemProp="item"> <span itemProp="name"> home </span> </Link> <meta itemProp="position" content="1"/> </li>Pero la salida es:
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"> <span itemprop="name"> home </span> <meta itemprop="position" content="1"> </li>Pero cuando hago clic en él, voy a la página de inicio, pero parece que funciona con js, no con href. pero si elimino la etiqueta span y pongo así:
<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index'} itemProp="item"> home </Link> <meta itemProp="position" content="1"/> </li>Producción:
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem"> <a href="/index">home</a> <meta itemprop="position" content="1"> </li>¿Por qué no se puede usar el intervalo dentro de la etiqueta de enlace?
Necesita la etiqueta <a> dentro del componente de Link Next.js si el elemento child no es una string . La etiqueta <a> se agrega automáticamente si el elemento secundario es una cadena
por lo que su código debería verse así:
<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index'} itemProp="item"> <a> <span itemProp="name"> home </span> </a> </Link> <meta itemProp="position" content="1"/> </li> La explicación de por qué necesitamos un <a> está aquí: https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx
La mejor práctica de SEO es usar una etiqueta de anchor siempre que tenga un enlace. Como dedujiste correctamente, Link es solo un componente contenedor y hace algo de magia usando JS. Entonces, técnicamente, también puede crear un link con span .
passHref obliga a que href se pase al hijo inmediato. Si usa la propiedad passHref como se muestra a continuación, la etiqueta href se agregará al span . :
<Link href={'/index'} itemProp="item" passHref> <span itemProp="name"> home </span> </Link>Pero esto no es bueno para tu SEO. Es por eso que los documentos de Nextjs sugieren usar una etiqueta de anclaje.
Ahora puede envolver a span interior y viceversa. Ambos son perfectamente válidos, pero le gustaría que su href esté en su etiqueta de anchor . Y para eso, debe usar el siguiente código como se sugiere en otra solución:
<Link href={'/index'} itemProp="item"> <a> <span itemProp="name"> home </span> </a> </Link>