Membuat sitemap dan metadata pada frontend website berbasis Vercel

Wed Aug 11 2021 06:40:44 GMT+0000 (Coordinated Universal Time)

Membuat sitemap

Buat file api/sitemap.js yang isinya:

const {get} = require("axios")
const {stringify} = require("qs")

async function ambilData(req, res){
    const {data} = await get("https://situs.com/ambil-sitemap")
    if (data) {
        res.writeHead(200, {
            'Content-Type': 'image/svg+xml'
        })
        let isi = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">`
        for (let x of data){
            isi += `
                <url>
                    <loc>https://situs.com/${x.slug}</loc>
                </url>
            `
        }
        isi += `<url><loc>https://situs.com/</loc></url>`
        isi += `</urlset>`
        res.write(isi)
        res.end()
    }
}

module.exports = ambilData

Jadi, untuk mengakses sitemapnya, buka aja situs.com/api/sitemap.

Membuat metadata

Pertama, kita cek package.json pada bagian build. Misalnya aja, buildnya itu svelte-kit build, maka diubah jadi svelte-kit build && cp build/index.html build/template.html.

Terus, buat file vercel.json yang isinya:

{
  "version": 2,
  "routes": [
    {
      "handle": "filesystem"
    },
    {
      "src": "/([^.]+)",
      "dest": "/api/blog.js"
    }
  ]
}

Lalu, buat file api/blog.js yang isinya:

const {get} = require('axios')
const {stringify} = require('qs')

const link = 'https://situs.com'

async function ambilData(req, res){
    let {data: template} = await get(`${link}/template.html`)

    const slug = req.url.split('/')[1]

    const {data} = await get(`https://situs.com/data/${slug}`)

    // id, judul, markdown, html, slug, tanggal, cuplikan

    if (data) {

        let {judul, cuplikan, slug, tanggal} = data[0]
        cuplikan = cuplikan.replace(/"/g, "").replace(/'/g, "")

        template = template.replace(/<title>.*</title>/, `
            <title>${judul}</title>
            <meta name="description" content="${cuplikan}" />
            <link rel="canonical" href="${link}/${slug}" />
            <meta property="og:locale" content="id_ID" />
            <meta property="og:type" content="article" />
            <meta property="og:title" content="${judul}" />
            <meta property="og:description" content="${cuplikan}" />
            <meta property="og:url" content="${link}/${slug}" />
            <meta property="og:site_name" content="Zen" />
            <meta property="article:publisher" content="https://www.facebook.com/mzaini30/" />
            <meta property="article:author" content="https://www.facebook.com/mzaini30/" />
            <meta property="article:published_time" content="${Date(tanggal).toString()}" />
            <meta property="article:modified_time" content="${Date(tanggal).toString()}" />
            <meta property="og:image" content="https://cdn.statically.io/og/${encodeURIComponent(judul)}.jpg" />
            <meta property="og:image:width" content="2048" />
            <meta property="og:image:height" content="1170" />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:creator" content="@zenia2020" />
            <meta name="twitter:site" content="@zenia2020" />
            <meta name="twitter:label1" content="Ditulis oleh" />
            <meta name="twitter:data1" content="Zen" />
        `)
    }

    res.send(template)
}

module.exports = ambilData

Buat yang mau donasi untuk kelangsungan komunitas Echlus, silahkan transfer ke halaman donasi kami.