Saltar al contenido

Cómo agregar SEO en reaccionar aplicaciones utilizando HelmetDec, 12thIn este tutorial, vamos a aprender acerca de SEO en reaccionar aplicaciones mediante el uso de la …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de SEO en reaccionar aplicaciones utilizando el paquete reaccionan casco.

En las aplicaciones individuales de página, el SEO es la parte más difícil para agregar porque estamos reutilizando sola página html todo el sitio.

Hay un paquete llamado Reaccionar casco que nos ayuda a controlar nuestras etiquetas de la cabeza. Reaccionar casco nos proporciona un componente casco que lleva las etiquetas meta HTML plano y lo añade dentro de la etiqueta de la cabeza a nuestras páginas.

Veamos un ejemplo.

En primer lugar, tenemos que instalar un paquete reaccionar-casco del gestor de paquetes NPM.

Ejecutar el siguiente comando en el terminal para instalar el paquete reaccionar-casco.

npm i react-helmet

Considere nuestra aplicación tiene tres rutas al igual que en el siguiente imagen.

si tratamos de navegar a los puestos de ruta o ruta de contactos que estamos viendo las mismas etiquetas de título y descripción para todas las rutas. el uso de

Let el componente Casco para controlar las etiquetas de la cabeza en nuestra aplicación.

import React from "react";
import { Helmet } from "react-helmet";

function App() {
return (


My seo app<itle><br /> <meta name="description" content="testing react helmet" /><br /> <meta name="keywords" content="react,seo,helmet" /><br /> </Helmet></p> <h1>Hello react</h1> <h2>This is app route</h2> </p></div> <p> );<br /> }</p> <p>export default App;</code> </p> <p> En el código anterior, lo primero que importó el componente Casco del paquete ‘reaccionar-casco’, entonces pasamos las etiquetas SEO como los niños al componente del casco. salida </p> <p>: </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/react-seo-example.png"> </p> <p> Hemos añadido correctamente las etiquetas de SEO para nuestra aplicación. </p> <h3> del lado del servidor uso representación </h3> <p> Reaccionar paquete casco también se utilizan en la representación del lado del servidor reaccionar aplicaciones. </p> <p> Ejemplo </p> <p> para la representación del lado servidor. </p> <p> <code>import React from 'react';<br /> import { renderToString } from 'react-dom/server';<br /> import express from 'express';<br /> import App from './src/App';<br /> const app = express();</p> <p>app.get('/*', (req, res) => {<br /> const app = renderToString(<App />);<br /> const helmet = Helmet.renderStatic();</p> <p>const html = `<br /> <!doctype html><br /> <html ${helmet.htmlAttributes.toString()}><br /> <head><br /> ${helmet.title.toString()}<br /> ${helmet.meta.toString()}<br /> ${helmet.link.toString()}<br /> </head><br /> <body data-rsssl=1 ${helmet.bodyAttributes.toString()}></p> <div id="app"> ${app} </div> <p> </body><br /> </html><br /> `;</p> <p> res.send(html);<br /> });</p> <p>app.listen(3000);</code> </p> <p> En el código del lado del servidor, primero se invoca el método renderToString pasando un componente de aplicación, junto invocamos la Helmet.renderStatic () para obtener los datos de la cabeza. </p> <p> Cada propiedad casco contiene un método toString () que se utiliza dentro de la cadena HTML. </p> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <section class="entry-related"> <h3>Entradas relacionadas</h3> <div class="flex flex-fluid"> <article id="post-2111" class="entry-item column-third"> <a href="https://openanalytics.es/modo-de-empleo-reaccionar-hooksdec-29thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-los-ganchos-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/usestate-hook-demo-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Modo de empleo Reaccionar hooksDec, 29thIn este tutorial, vamos a aprender acerca de cómo utilizar los ganchos en …</h4> </a> </article> <article id="post-2112" class="entry-item column-third"> <a href="https://openanalytics.es/una-guia-para-principiantes-a-la-interfaz-de-usuario-del-material-reaccionar-tutorialdec-4thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-el-material/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/create-react-app-install-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Una guía para principiantes a la interfaz de usuario del material Reaccionar tutorialDec, 4thIn este tutorial, vamos a aprender acerca de cómo utilizar el material …</h4> </a> </article> <article id="post-2115" class="entry-item column-third"> <a href="https://openanalytics.es/como-agregar-hojas-de-estilo-externas-a-reactdec-27thin-reaccionar-aplicaciones-que-no-necesitamos-anadir-etiquetas-de-vinculos-manualmente-al-html/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-external-style-sheet-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Cómo agregar hojas de estilo externas a reactDec, 27thIn reaccionar aplicaciones que no necesitamos añadir etiquetas de vínculos manualmente al HTML …</h4> </a> </article> <article id="post-2090" class="entry-item column-third"> <a href="https://openanalytics.es/componentes-de-orden-superior-especial-en-reaccionar-con-examplesdec-13thin-este-tutorial-vamos-a-aprender-acerca-de-lo-que-son-de-orden-superior/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/hoc-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">componentes de orden superior (Especial) en Reaccionar con examplesDec, 13thIn este tutorial, vamos a aprender acerca de lo que son de orden superior …</h4> </a> </article> <article id="post-2094" class="entry-item column-third"> <a href="https://openanalytics.es/reaccionar-modal-tutorial-utilizando-hookssep-19thin-este-tutorial-vamos-a-aprender-acerca-de-como-crear-un-referente-en/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/modal-open-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Reaccionar modal tutorial utilizando hooksSep, 19thIn este tutorial, vamos a aprender acerca de cómo crear un referente en …</h4> </a> </article> <article id="post-2096" class="entry-item column-third"> <a href="https://openanalytics.es/http-solicitudes-en-redux-utilizando-redux-thunkjan-11thin-este-tutorial-vamos-a-aprender-acerca-de-como-obtener-los-datos-de-la/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/http-requests-redux-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Http solicitudes en Redux utilizando Redux-thunkJan, 11thIn este tutorial, vamos a aprender acerca de cómo obtener los datos de la …</h4> </a> </article> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/como-agregar-seo-en-reaccionar-aplicaciones-utilizando-helmetdec-12thin-este-tutorial-vamos-a-aprender-acerca-de-seo-en-reaccionar-aplicaciones-mediante-el-uso-de-la/#respond" style="display:none;">Cancelar respuesta</a></small></h3> <form action="https://openanalytics.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='2002' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </footer> </div> </div> </main> <footer class="site-footer"> <div class="container"> <div class="credits row"> <p>SEO y Programación.</p> </div> </div> </footer> <!-- Site Overlay --> <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Open Analytics", "alternateName": "SEO y Programación.", "url": "https://openanalytics.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "  En este tutorial, vamos a aprender acerca de SEO en reaccionar Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/como-agregar-seo-en-reaccionar-aplicaciones-utilizando-helmetdec-12thin-este-tutorial-vamos-a-aprender-acerca-de-seo-en-reaccionar-aplicaciones-mediante-el-uso-de-la/" }, "image": { "@type": "ImageObject", "url": "https://openanalytics.es/wp-content/uploads/2020/03/react-routing-seo.png", "height": 1024, "width": 1024 }, "datePublished": "2020-03-13", "dateModified": "2020-03-13", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Open Analytics" } } </script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/navigation.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/social.min.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/main.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/comment-reply.min.js?ver=5.2.5'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.5'></script> </body> </html>