Chia sẻ Blog

Light ModeDark Mode

Blog chia sẻ về thủ thuật.

[Gatsby] Cài đặt các plugin cần thiết cho SEO

Published 2 years ago - 2 mins read

Thêm vào file gatsby-config.js

// gatsby-config.js
const siteUrl = process.env.URL || process.env.DEPLOY_URL || "https://chiase.web.app"
module.exports = {
  siteMetadata: {
    title: `Chia sẻ Blog`,
    description: `Blog chia sẻ về thủ thuật.`,
    author: `Maxbong`,
    siteUrl,
    siteVerification: {
      google: ``, // Add property from https://search.google.com/search-console, get code then paste here.
      bing: ``,
    },
    social: {
      //usernames for SEO
      twitter: "",
      linkedin: "",
    },
    socialLinks: {
      // profile URLS for social links, include https://
      twitter: "",
      linkedin: "",
      facebook: "",
      stackOverflow: "",
      github: "",
      instagram: "",
      youtube: "",
      email: "xxxx@gmail.com", //include mailto:
      phone: "09323", //include tel:
    },
    keywords: [],
    organization: {
      //update with relevant personal data
      name: "Maxbong",
      url: siteUrl,
    },
  },
  plugins: [
    {
    resolve: `gatsby-plugin-google-analytics`,
    options: {
      trackingId: `UA-110478507-5`,    },
    },
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: siteUrl,
        sitemap: siteUrl + '/sitemap.xml',
        policy: [{ userAgent: '*', allow: '/' }]
      }
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMarkdownRemark } }) => {              return allMarkdownRemark.edges.map(edge => {                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.frontmatter.description ? edge.node.frontmatter.description : edge.node.excerpt,
                  date: edge.node.frontmatter.date,
                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
              {
                allMarkdownRemark(                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  edges {
                    node {
                      excerpt
                      html
                      fields { slug }
                      frontmatter {
                        title
                        date
                        description
                      }
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "Your Site's RSS Feed",
          },
        ],
      },
    },
    `gatsby-plugin-sitemap`,
    .........

Gatsby-plugin-sitemap

Chạy lệnh yarn add gatsby-plugin-sitemap, file/sitemap.xml được tạo ra, để xem trước file này ta phải dùng lệnh yarn buildyarn serve, sau đó truy cập vào địa chỉ http://localhost:9000/sitemap.xml.

Xem thêm gatsby-plugin-sitemap

Gatsby-plugin-feed

Chạy lệnh yarn add gatsby-plugin-feed, file /rss.xml được tạo ra.

Xem thêm gatsby-plugin-feed

Gatsby-plugin-robots-txt

Chạy lệnh yarn add gatsby-plugin-robots-txt, file /robot.txt được tạo ra. Xem thêm gatsby-plugin-robots-txt

gatsby-plugin-google-analytics

Google search console

Truy cập vào Google search console, đăng ký thêm site mới, lấy mã rồi dán vào file gatsby-config.js.