개츠비와 함께 검색엔진 최적화를 최우선으로 삼다

SEO를 우선시하는 마음가짐.

저희가 시작하기 전에.

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

yarn add react-helmet gatsby-plugin-react-helmet 
yarn add gatsby-plugin-feed gatsby-plugin-google-analytics gatsby-plugin-sitemap
yarn add gatsby-plugin-robots-txt

개츠비 설정을 설정합니다.회사 명

사이트 메타데이터

<meta name="title" content="My Super Awesome Site"/>
<meta name="description" content="My Super Awesome Site will blow your mind with radical content, extravagant colors, and hip designs."/>

query: `
  site {
    siteMetadata {
      title
      description
      author
      siteUrl
      siteVerification {
        google
        bing
      }
      social {
        twitter
      }
      socialLinks {
        twitter
        linkedin
        facebook
        stackOverflow
        github
        instagram
        pinterest
        youtube
        email
        phone
        fax
        address
      }
      keywords
      organization {
        name
        url
      }
    }
  }
`

site: {
  siteMetadata: {
    title: String,
    description: String,
    author: String,
    siteUrl: String,
    siteVerification: {
      google: String,
      bing: String
    },
    social: {
      twitter: String
    },
    socialLinks: {
      twitter: String,
      linkedin: String,
      facebook: String,
      stackOverflow: String,
      github: String,
      instagram: String,
      pinterest: String,
      youtube: String,
      email: String,
      phone: String,
      fax: String,
      address: String
    },
    keywords: [String],
    organization: {
      name: String,
      url: String
    }
  }
}

플러그인 설정

module.exports = {
    siteMetadata: {
      / **SEE ABOVE** /
    },
    plugins: [/ **An ARRAY** /], }

plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
  exclude: [`/admin`, `/tags/links`] 
}
},
]

{
resolve: `gatsby-plugin-feed`,
options: {
// graphQL query to get siteMetadata 
query: ` 
  { 
    site { 
      siteMetadata { 
        title 
        description 
        siteUrl 
        site_url: siteUrl, 
        author 
      }
    }
  } 
`, 
feeds: [
  // an array of feeds, I just have one below
  {
    serialize: ({ query: { site, allMarkdownRemark } }) => {
      const { siteMetadata : { siteUrl } } = site;
      return allMarkdownRemark.edges.map(edge => {
        const { 
          node: { 
            frontmatter: {
              title, 
              date, 
              path, 
              author: { name, email }, 
              featured: { publicURL }, 
              featuredAlt
            },
            excerpt, 
            html
          } 
        } = edge;
        return Object.assign({}, edge.node.frontmatter, {
          language: `en-us`,
          title,
          description: excerpt,
          date,
          url: siteUrl + path,
          guid: siteUrl + path,
          author: `${email} ( ${name} )`,
          image: {
            url: siteUrl + publicURL,
            title: featuredAlt,
            link: siteUrl + path,
          },
          custom_elements: [{ "content:encoded": html }],
        })
      })
    },
    // query to get blog post data 
    query: ` 
      { 
        allMarkdownRemark(  
          sort: { order: DESC, fields: [frontmatter___date] }, 
        ) { 
          edges { 
            node { 
              excerpt 
              html 
              frontmatter { 
                path 
                date 
                title 
                featured { publicURL } 
                featuredAlt 
                author { 
                  name 
                  email 
                } 
              } 
            } 
          } 
        } 
      } 
    `, 
    output: "/rss.xml",
    title: `My Awesome Site | RSS Feed`,
  },
],
},
},

{
resolve: 'gatsby-plugin-robots-txt',
options: {
policy: [{ userAgent: '*', allow: '/' }] 
}
},

{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: ``, 
},
},

검색 엔진 최적화 구성 요소 최적화

function SEO({
  description,
  lang,
  meta,
  keywords,
  image,
  title,
  pathname,
  isBlogPost,
  author,
  datePublished = false,
  dateModified = false
}) {

{
  property: `og:type`,
  content: isBlogPost ? `article` : `website`,
},

// ALWAYS ADD IMAGE:ALT 
{ property: "og:image:alt", content: image.alt }, 
{ property: "twitter:image:alt", content: image.alt },

.concat(
  // handle Secure Image 
  metaImage && metaImage.indexOf("https") > -1 
    ? [
        { property: "twitter:image:secure_url", content: metaImage, }, 
        { property: "og:image:secure_url", content: metaImage },
    ] 
    : [] 
)

Jason Lengstorf에서 왔습니다. SchemaOrg 구성 요소 구성

function SEO(.....) {
  ...
  return (
    <> {/* Fragment Shorthand */}
      <Helmet 
        {/* All the Meta Tag Configuration */}
      />
      <SchemaOrg 
        isBlogPost={isBlogPost} 
        url={metaUrl} 
        title={title} 
        image={metaImage} 
        description={metaDescription} 
        datePublished={datePublished} 
        dateModified={dateModified} 
        canonicalUrl={siteUrl} 
        author={isBlogPost ? author : siteMetadata.author} 
        organization={organization} 
        defaultTitle={title} 
      />   
    </>
  )
}

author: {
  "@type": "Person",
  name: author.name,
  email: author.email, 
},

publisher: {
  "@type": "Organization",
  url: organization.url,
  logo: { 
    "@type": "ImageObject", 
    url: organization.logo.url, 
    width: organization.logo.width, 
    height: organization.logo.height
  }, 
  name: organization.name,
},

datePublished,
dateModified,

구글 구조화 데이터 테스트 도구 총체적 사고