Saltar al contenido

Cómo agregar SEO para el Gatsby blogDec, 9thSearch sitios de optimización de motores se pueden mostrar mejor en la búsqueda …

marzo 13, 2020

 

búsqueda sitios de optimización de motores se pueden mostrar mejor en los resultados de la búsqueda y también ayuda a los bots de los motores de búsqueda para entender mejor el contenido va a publicar. etiquetas

Open Graph se utilizan para obtener los fragmentos enriquecidos cuando alguien comparte su contenido en las redes sociales.

También puede comprobar fuera de los meta-tags que Google entiende.

Gatsby Seo-Componente

crear un nuevo componente llamado Metatags.js para que podamos volver a utilizarlo en cualquier momento. En

import React from 'react';
import Helmet from 'react-helmet'

function Metatags(props) {
return (


{props.title}<itle><br /> <meta name='title' content= {props.title }/><br /> <meta name='description' content= {props.description }/><br /> </Helmet><br /> )<br /> }</p> <p>export default Metatags;</code> </p> <p> del código anterior, hemos añadido las etiquetas título y descripción mediante el paquete reaccionar-casco. Puede listo para usar el componente anterior si no se preocupan por el intercambio de medios de comunicación social. </p> <p> Vamos a mejorar el componente anteriormente para el intercambio social. </p> <p> <code>import React from 'react';<br /> import Helmet from 'react-helmet'</p> <p>function Metatags(props) {</p> <p> const { title, description, url, pathname, thumbnail } = props</p> <p> return (<br /> <Helmet><br /> <html lang="en" /><br /> <title>{title}<itle><br /> <meta name='title' content={title} /></p> <p> <meta name='description' content={description} /></p> <p> {pathname && <meta property='og:url' content={url + pathname} />}</p> <p> {thumbnail && <meta property='og:image' content={thumbnail} />}</p> <p> {thumbnail && <meta property=' og:image:secure_url' content={thumbnail} />}</p> <p> <meta property='og:description' content={description} /></p> <p> <meta property='og:image:width' content='1200' /></p> <p> <meta property='og:image:height' content='630' /></p> <p> <meta property='og:locale' content='en' /></p> <p> <meta name='twitter:title' content={title} /></p> <p> <meta name='twitter:description' content={description} /><br /> <meta name='twitter:card' content='summary_large_image' /></p> <p> {thumbnail && <meta name='twitter:image' content={thumbnail} />}<br /> </Helmet><br /> )<br /> }<br /> export default Metatags;</code> </p> <p> ahora que se puede obtener fragmentos enriquecidos cuando compartes tu mensaje en Twitter o Facebook. </p> <h2> Cómo utilizar este componente? </h2> <p> Se puede utilizar el archivo de blog-post.js haciendo pasar el título y otros ámbitos. </p> <p> <code> <MetaTags title={title} description={excerpt} thumbnail={url + thumbnail} url={url} pathname={props.location.pathname} /></code> </p> <p> feliz de codificación … </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-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> <article id="post-2107" class="entry-item column-third"> <a href="https://openanalytics.es/iniciacion-a-la-interfaz-de-usuario-semantica-reactnov-9thin-este-tutorial-vamos-a-aprender-acerca-de-como-utilizar-la-interfaz-de-usuario-semantica/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/react-semantic-ui-grid-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Iniciación a la interfaz de usuario Semántica ReactNov, 9thIn este tutorial, vamos a aprender acerca de cómo utilizar la interfaz de usuario semántica …</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-para-el-gatsby-blogdec-9thsearch-sitios-de-optimizacion-de-motores-se-pueden-mostrar-mejor-en-la-busqueda/#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='2093' 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": "  búsqueda sitios de optimización de motores se pueden mostrar mejor en Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/como-agregar-seo-para-el-gatsby-blogdec-9thsearch-sitios-de-optimizacion-de-motores-se-pueden-mostrar-mejor-en-la-busqueda/" }, "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.7'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.7'></script> </body> </html>