One place for hosting & domains

      React

      How to Learn React… Fast


      If you’re interested in building User Interfaces (UIs), you’ll likely want to learn React. However, figuring out where to start can be challenging. There are multiple levels ranging from beginner to advanced. What’s more, there are a handful of elements that make it different from other libraries and frameworks.

      The good news is that there are plenty of resources out there that can help simplify the learning process. With the right knowledge, tools, and guidance, you can gain a sound understanding of React. That way, you can start using it in your development projects.

      In this post, we’ll explain what React is and discuss the benefits of learning it. Then, we’ll go over some skills and topics to review before you can explore React. Finally, we’ll provide you with information and resources that you can use to learn React as fast (and affordably) as possible. Let’s jump in!

      An Introduction to React

      React is a JavaScript library for building user interfaces and front-end applications:

      React website

      It lets you create reusable components so that your code is easy to read and maintain. When paired with a tool like Webpack, React can be used to build single-page applications and static websites.

      It’s also important to note that React is declarative. That means it uses a more natural way of describing what should be displayed on the screen. This makes your code easier to debug. Additionally, since React is component-based, you can more easily manipulate and reuse small, independent pieces in different parts of your application.

      Furthermore, there are a number of features that make React suitable for building UIs. One is JSX, a syntax extension to JavaScript that lets you write HTML-like code inside your JavaScript files. This makes your code even more readable and even easier to work with.

      Another is virtual Direct Object Modeling (DOM). The virtual DOM is a representation of the actual DOM in memory. React uses this to figure out which parts of the UI need to be updated when state changes occur. It makes React applications more performant than those that use the full DOM.

      Why You May Want to Learn React

      React is a popular choice for building UIs for a handful of reasons. It offers a number of benefits, including that it:

      Moreover, React is different from other frameworks or libraries because it uses a declarative paradigm instead of an imperative one. In React, you describe what your UI should look like, and React takes care of updating the UI when the underlying data changes.

      This approach makes it easy to create complex UIs without having to write much code. It also makes it easy to reason about your code. This, as we mentioned before, makes debugging and maintenance simpler.

      Furthermore, React is designed to be extensible, so you can create your own custom components and use them in your application. It’s also open source, so you can use it for free.

      What to Learn Before React

      Before learning React, there are a few things developers should have a working knowledge of first. Let’s take a look at some of the most important:

      • JavaScript: React is a JavaScript library, so it’s important that you learn JavaScript have a good understanding of the language before you start.
      • HTML and CSS: Learning HTML and CSS is strongly recommended for learning React since its applications are typically written in HTML and CSS.
      • Git: React applications are often stored in a Git repository, so it’s important to understand how to use this version control system.
      • Webpack: As we mentioned, Webpack is a tool that can be used to bundle your React application into a single file for deployment.
      • Babel: Babel is a tool that can be used to transpile your React code into JavaScript that can be run in the browser.
      • React Router: This is a library that you can use to manage the routing in your React application.
      • Redux: This library can help you manage state in your React application.

      These are just a few of the elements that developers should understand before they start learning React. At a minimum, a solid grasp of JavaScript, HTML, and CSS is needed.

      It’s also helpful if you’re experienced with common programming concepts such as functions, objects, arrays, and classes. However, the more familiar you are with all of the above, the easier it will be to get the hang of React.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      How to Learn React Fast (8 Useful Resources)

      If you’re interested in learning React, there are a handful of resources available that can help streamline the process. Below, we’ve compiled a list of some of the most useful and inexpensive options you can use.

      1. React Official Website

      The React official website contains a wealth of information about React, including important documentation, tutorials, and examples. It also has a community forum where you can ask questions and get help from other React developers.

      On the website, there’s a link to the React repository on GitHub, where you can find the source code for React. To get started, you can navigate to the website and select the Tutorial tab:

      React website tutorial

      Here, you’ll find an introductory lesson on React. It starts by walking you through the process of building a small game. Throughout it, you’ll learn the fundamental techniques needed for constructing a React application.

      It’s an excellent option if you’re someone who learns by doing. In addition to teaching you the fundamentals (components, props, and state), it will also cover the most important React development techniques and provide you with a more comprehensive understanding of the React benefits.

      Under the Docs tab on the website, you can also find tons of helpful resources, tools, and article guides. You can browse them based on specific topics and goals, such as adding React to a website, using it to create an app, and learning advanced concepts.

      2. Codecademy

      Codecademy is a website that offers interactive courses on various programming languages, like React:

      Codeacademy website

      The courses are self-paced, so you can work through them at your own speed. More specifically, Codecademy offers a Learn React course on building front-end applications:

      Codeacademy Learn React courses

      The Codecademy React course covers the basics of React, including how to create components, props, and states. Additionally, the course teaches you how to use React with JavaScript and how to build a simple front-end application with React. After you’ve completed this course, you should be able to build simple React applications.

      The course is free to take, but it does have a monthly subscription fee if you want access to the full range of features. With the pro plan, you can earn a certificate upon completion. It takes approximately 20 hours to complete.

      3. FreeCodeCamp.org

      Free Code Camp is another great resource for developers who want to learn how to code without spending any money. It offers a Learn ReactJS – Complete Roadmap guide on building front-end applications with React:

      Alt text: The Freecodecamp.org website.

      This is a great option for beginners, since it goes over what to learn before. It can also help you progress from being an intermediate React developer to an advanced one. You can use this guide as a map of your learning experience. It is also packed with helpful tutorials and resources for every step of the learning journey.

      4. Udemy

      Udemy is a popular platform that provides a wide range of online learning paths on various subjects. It has over 3,000 courses on React:

      Udemy website

      Some are a bit outdated and particularly short. However, there are plenty of solid options worth checking out, such as React JS Frontend Web Development for Beginners:

      Udemy ReactJS framework course

      This free course will teach you the basics of hooks and working with external Application Programming Interfaces (APIs). It can also show you how to make AJAX requests and how to build a news app.

      Udemy’s free courses all include nearly three hours of online video content. However, paid memberships are also available. With a paid plan, you can get a certificate of completion, plus instructor Q&A and direct messages.

      5. Egghead.io

      Egghead.io is great resource for learning React:

      egghead.io website web developer courses

      It offers a number of video courses that cover various topics related to React. One of the most popular is The Beginner’s Guide to React:

      egghead.io beginner's guide to React course

      This is a free, hands-on course that teaches you how to build smart websites with ReactJS. The course is composed of 28 parts, with each lesson in a single index.html file. This provides a distraction-free learning environment that lets you develop your skills in a focused, streamlined manner.

      The course begins with a blank file, then gradually grows more complex as you progress through the lessons. At the end, you’ll learn how to move to a product-ready environment and deploy your application.

      Additionally, the course teaches you what problems React can solve and how to work them out. It also explains what JSX is and the role it plays in standard JavaScript objects and function calls. In this course, you’ll also learn how to manage state with hooks and build forms.

      6. Coursera

      Another popular online learning platform to consider for learning React is Coursera:

      Coursera website

      The professional courses on this website are created by highly accredited universities across the globe. One of the most helpful React courses is Front-End Web Development with React:

      Coursera front end web development with React course

      This premium course teaches you fundamental concepts as well as more advanced methods, such as React routing, designing single-page applications, how to use the REST API, and using Redux for client-server communication. Offered by The Hong Kong University of Science and Technology, this course is a bit more formal than other options.

      However, it delivers comprehensive, detailed lessons that can help you advance to the next step of your React knowledge. By the end of the course, you’ll be familiar with client-side JavaScript application development and the React library. You’ll also be able to:

      • Use various React features including components and forms.
      • Implement a functional front-end web application using React.
      • Utilize Reactstrap for designing responsive React mobile applications.
      • Use Redux to design the architecture for a React-Redux application.

      You also have multiple options for joining the course. As a standalone course, you can pay a monthly fee. However, if you join Coursera Plus, the course is included. You’ll also receive a professional certificate upon completion and unlimited access to other courses.

      7. Scrimba

      Scrimba is a powerful platform for learning how to code:

      Scrimba website

      It offers thousands of paths and courses that can help you learn React Native, React app building, and much more. One of the courses we recommend is Learn React:

      Scrimba website learn React for free course

      This interactive course is an excellent resource for beginners. It teaches the basics of modern React and offers lessons that require you to solve more than 140 coding challenges. You’ll build eight projects and explore 147 screencasts across four modules.

      Throughout the course, you can take multiple paths. For example, you can learn how to build a React information site in two and a half hours. You can also learn how to build a meme generator or create an AirBnB experience website.

      8. Facebook Create-React-App

      Facebook’s create-react-app is a tool that can be used to create a boilerplate React application:

      Facebook create-react-app

      Available on GitHub, this resource for developers lets you get started with React quickly. It teaches you how to create a new app and develop apps bootstrapped with it, with no build configuration.

      You can use it on macOS, Windows, and Linux. In addition to being completely free, you also don’t need to worry about installing or configuring tools such as Webpack or Babel. You can simply create a project to get started.

      Start Learning React Today

      React is an excellent JavaScript library that is useful if you’re interested in front-end programming. It offers a simplified approach to building complex UIs without having to write a lot of code. Fortunately, there are plenty of platforms and resources available to help you learn React for relatively cheap (sometimes even free).

      As we discussed in this post, once you have JavaScript, HTML, and CSS experience, there are a handful of ways you can learn React. Some of the most popular resources to check out include the React official website, Codecademy, and FreeCodeCamp.org.

      Are you looking for an affordable yet reliable hosting solution for your web development projects? Check out DreamHost shared hosting plans to get started!

      Website Hosting That Powers Your Purpose

      We make sure your website is fast, secure and always up so your visitors trust you. Plans start at $1.99/mo.

      shared hosting



      Source link

      Getting Started With React


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      Date Time RSVP
      September 15, 2021 11 a.m.–12 p.m. ET / 3–4 p.m. GMT

      About the Talk

      React is the most popular JavaScript library out there. It does have a learning curve though. So why is it so loved? Let’s take a look at React and use it to build our sites and apps.

      What You’ll Learn

      • How to use React
      • Why you would want to use React
      • How to start building React apps

      This Talk Is Designed For

      All developers that want to build frontends

      Prerequisites

      Some JavaScript knowledge

      Resources

      React, a JavaScript library for building user interfaces
      React docs
      How to Code in React.js
      Consuming a Custom API With React

      To join the live Tech Talk, register here.



      Source link

      How To Boost SEO Using Gatsby’s SEO Component and Gatsby React Helmet


      The author selected /dev/color to receive a donation as part of the Write for DOnations program.

      Introduction

      When a user codes and deploys a website, they often want an online audience to find and read the website they’ve created. Search engine optimization (SEO) is the practice of making a website discoverable by this online audience. Optimizing search involves making changes to your Gatsby app so that it will show up in the results for search engines like Google, Bing, and DuckDuckGo. This is often done by fine-tuning the metadata that ends up in the HTML for your site.

      In this tutorial, you will configure Gatsby’s SEO component that comes with SEO tooling right out of the box. You will add meta tags to your site using Gatsby React Helmet. Meta tags are important because they give search engines information about your site. Usually the better understanding Google has about your site, the more accurately it can index your webpage. You will also create social media cards for Twitter, and Open Graph meta tags in Facebook. There are over one billion people using some form of social media, so optimizing for social media is an efficient way to get your website in front of many internet users.

      Prerequisites

      Step 1 — Creating an Empty Project

      In this section, you are going to create a new project based on the Gatsby starter default template. You are going to create a whale-watching website, and in the following steps you will improve its SEO. This will give you a solid project that you can optimize with meta tags and social media assets.

      First, use the CLI tool to start a new project named gatsby-seo-project:

      • gatsby new gatsby-seo-project https://github.com/gatsbyjs/gatsby-starter-default

      This creates a new website from the starter template in the gatsby-starter-default GitHub repository from Gatsby.

      Once the project is created, move into the src/images folder of the project:

      • cd gatsby-seo-project/src/images

      Once you are in the images folder, download a picture of a whale from the stock photography website Unsplash:

      • wget 'https://unsplash.com/photos/JRsl_wfC-9A/download?force=true&w=640'

      Wget is a Gnu command that downloads files from the internet.

      Next, list all of the images in the same images directory with the ls command:

      You will receive the following output:

      Output

      'download?force=true&w=640' gatsby-astronaut.png gatsby-icon.png

      'download?force=true&w=640' is a hard name to remember, so rename it to whale-watching.png:

      • mv 'download?force=true&w=640' whale-watching.png

      Now that you have your whale image, go to the root of your project and open src/pages/index.js. Make the highlighted change in the following code to customize your website:

      gatsby-seo-project/src/pages/index.js

      import * as React from "react"
      import { Link } from "gatsby"
      import { StaticImage } from "gatsby-plugin-image"
      
      import Layout from "../components/layout"
      import SEO from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <SEO title="Home" />
          <h1>Whale watching for all</h1>
          <p>Come see extraordinary whales!</p>
          <StaticImage
            src="https://www.digitalocean.com/community/tutorials/images/whale-watching.png"
            width={300}
            quality={95}
            formats={["AUTO", "WEBP", "AVIF"]}
            alt="A surfacing whale"
            style={{ marginBottom: `1.45rem` }}
          />
          <p>
            <Link to="/page-2/">Go to page 2</Link> <br />
            <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
          </p>
        </Layout>
      )
      
      export default IndexPage
      

      Save the file. To try out the code, start a local development server with the following command:

      Once the server is running, check localhost:8000 in your browser. You will find your new site rendered in the browser:

      Gatsby site with whale image and text.

      You are now finished setting up your project. Next, you will add meta tags to your site header with React Helmet.

      Step 2 — Creating an SEO Component with React Helmet

      In this section, you are going to learn how to control the technical SEO aspects of your site with the help of Gatsby’s React Helmet plugin and an SEO component. The Helmet plugin provides server side rendering to all of the metadata found in the head of the Gatsby site. This is important because, without server side rendering, there is a chance that server engine bots might not be able to scrape and record metadata before the site is rendered, making it more difficult to index the site for search.

      When you use gatsby-starter-default as a base for your website, it already comes with everything you need to start tweaking SEO. To do this, you will be working with the following files:

      • gatsby-config.js: Gatsby config includes metadata values that GraphQL will query and place in the SEO file.

      • src/components/seo.js: This file contains the Helmet and the SEO component.

      You are first going to open the gatsby-config.js file, which is located at the root of your project:

      Before you make any changes to the file, examine the plugins key in the exported object. The Gatsby default starter already has the Helmet plugin installed, as shown in the following highlighted line:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Gatsby Default Starter`,
          description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
          author: `@gatsbyjs`,
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      Next, direct your attention to the siteMetadata key. This contains an object that holds the metadata for your site. You are going to change the title, the description, and the author. You will also add keywords to help users search for your site:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
        },
      ...
      

      The keywords metadata is instrumental in optimizing for search. While the topic of choosing keywords is beyond the scope of this tutorial, you can learn more about the basics of SEO at Google’s search documentation website. Here you have added specific search terms that users might use when searching for a site like the sample whale-watching site.

      Save and close this file.

      Next, proceed to open the SEO component:

      • nano src/components/seo.js

      There is a lot going on in the SEO component. Focus your attention on the SEO function. In this function you are using GraphQL to query the siteMetadata object. Remember that you have added keywords to your siteMetadata object, so make the following highlighted change to your query:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                }
              }
            }
          `
        )
      ...
      

      Below the SEO function, add a reference to this queried data in a keywords constant to make the data easier to work with:

      gatsby-seo-project/src/components/seo.js

      ...
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      ...
      

      The variable keywords has all of the keywords you created in the gatsby-config.js file. The variable metaDescription is a description that you can pass as a prop on a page or query from the siteMetadata object in gatsby-config.js. Finally, defaultTitle is set to the value of title in the siteMetadata object. The ? in the siteMetadata attribute checks for a null value and returns undefined for a null or nullish value.

      Next, inspect what the SEO component is returning, and add an object for keywords:

      gatsby-seo-project/src/components/seo.js

      ...
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      ...
      

      You are returning a Helmet component. Helmet populates the head of an HTML document using server side rendered data, which makes it easier for Google to crawl and record the metadata. htmlAttributes={{lang,}} specifies the language of the element’s content, and title is the title found in the metadata, which comes from siteMetadata. titleTemplate creates the title tag, which is important, since Google penalizes sites that are missing a title tag.

      After this section, you’ll find the meta object, which contains the metadata. Most of the values here come from siteMetadata.

      Finally, examine the SEO.defaultProps and SEO.propTypes objects:

      gatsby-seo-project/src/components/seo.js

      ...
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      

      SEO.defaultProps are the default values of the SEO props. SEO.propTypes passes the correct value type and acts as a light typing system.

      Save your file with the new keywords entry and start the local server in your terminal:

      After the server has starter, enter localhost:8000 in the browser. Open up the view of the HTML in your browser; for Chrome, right click the window and open DevTools. Choose Elements and open the <head></head> tag. In this tag, you will find the following line:

      ...
      <meta name="keywords" content="whales, marine life, trip, recreation" data-react-helmet="true">
      ...
      

      You have now successfully set the header data with React Helmet.

      In this section, you created metadata to improve the SEO of your whale-watching site. In the next section, you’ll add an image and make this site easier to share on social media.

      Step 3 — Adding Images to Enhance Social Sharing

      Social networks play an important role in attracting attention to your content. In this section, you are going to add an image to two features that optimize sharing your site on social: your Twitter card and the Open Graph protocol for Facebook. You will also learn which tools to use to ensure that your metadata is appearing on these two social network platforms.

      Open up gatsby-config in a text editor:

      You are going to add images/whale-watching.png into the siteMetadata:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
          image: `src/images/whale-watching.png`
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      GraphQL will now be able to query the image. Close and save the file.

      Next, open up seo.js in the text editor:

      • nano src/components/seo.js

      Now that your image is in the site metadata, it’s time to add it to the SEO component. Add the following highlighted lines to seo.js:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                  image
                }
              }
            }
          `
        )
        const image = site.siteMetadata.image
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                property: `og:image`,
                content: image,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:image`,
                content: image,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      }
      
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        image: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      
      export default SEO
      

      In this code, you:

      • Added the image to the GraphQL query
      • Created an image variable and set the value to the image found in siteMetadata
      • Added og:image to the meta object
      • Added twitter:image to the meta object
      • Added image to SEO.propTypes

      Save your changes and close seo.js.

      The final step in this process is to test these changes on Twitter and Facebook. This cannot be done from a local development server; in order to test your site, you must first deploy it. There are many ways to do this, including using DigitalOcean’s App Platform, which you can read about in the How To Deploy a Gatsby Application to DigitalOcean App Platform tutorial.

      This tutorial will use a Gatsby app hosted on App Platform as an example. You can find this app at https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/, and it includes the SEO changes you made to your site in this tutorial.

      If you want to test if social media objects show up on Twitter, head over https://cards-dev.twitter.com/validator. This validator is maintained by Twitter, and requires a Twitter account to use. Put the URL for the sample deployed site into the validator:

      Twitter card validator

      Notice that the custom image will now show when users tweet about your website.

      Next, head over to Facebook’s Open Graph validator at https://developers.facebook.com/tools/debug/. This is maintained by Facebook, and requires a Facebook account to use. Add the URL for the sample app into the URL field. The debugger will provide you with more detail about which og objects are present and which ones are missing:

      Facebook open graph validator

      Notice that the image appears with a title and a description in the Link Preview section.

      You’ve now added an image to your metadata, a Twitter card, and a Facebook Open Graph.

      Conclusion

      In this tutorial, you boosted the SEO of your site using Gatsby’s React Helmet and the SEO component. You’ve also learned how to add images to social media cards to make your site more shareable.

      With the basics of SEO covered, you can now read more about optimizing search for Gatsby at the official Gatsby documentation.





      Source link