Rank Math NextHead NextJS Parser

parse.ts

import { Metadata } from "next";
import { Element, Text, htmlToDOM } from 'html-react-parser';
import { OpenGraph } from "next/dist/lib/metadata/types/opengraph-types";
import { Twitter } from "next/dist/lib/metadata/types/twitter-types";

/**
Example Metadata
<meta name="description" content="Create a professional-looking salary slip for your employees starting this month! Learn all about the important details of a salary slip and the format."/>
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Salary Slip Format Excel &amp; PDF Sample" />
<meta property="og:description" content="Create a professional-looking salary slip for your employees starting this month! Learn all about the important details of a salary slip and the format." />
<meta property="og:url" content="https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/" />
<meta property="og:site_name" content="eSahayak" />
<meta property="article:tag" content="HR" />
<meta property="article:section" content="Human Resource (HR)" />
<meta property="og:updated_time" content="2023-11-10T12:52:13+05:30" />
<meta property="og:image" content="https://esahayakio.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2023/10/30140430/SalarySlip.png" />
<meta property="og:image:secure_url" content="https://esahayakio.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2023/10/30140430/SalarySlip.png" />
<meta property="og:image:width" content="1382" />
<meta property="og:image:height" content="732" />
<meta property="og:image:alt" content="salary slip" />
<meta property="og:image:type" content="image/png" />
<meta property="article:published_time" content="2023-10-29T12:23:21+05:30" />
<meta property="article:modified_time" content="2023-11-10T12:52:13+05:30" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Salary Slip Format Excel &amp; PDF Sample" />
<meta name="twitter:description" content="Create a professional-looking salary slip for your employees starting this month! Learn all about the important details of a salary slip and the format." />
<meta name="twitter:image" content="https://esahayakio.s3.ap-southeast-1.amazonaws.com/wp-content/uploads/2023/10/30140430/SalarySlip.png" />
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="Bani Waraich" />
<meta name="twitter:label2" content="Time to read" />
<meta name="twitter:data2" content="5 minutes" />
<script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"headline":"Salary Slip Format Excel &amp; PDF Sample","description":"Create a professional-looking salary slip for your employees starting this month! Learn all about the important details of a salary slip and the format.","keywords":"salary slip,salary slip format,excel format","speakable":{"@type":"SpeakableSpecification","cssSelector":[]},"@type":"BlogPosting","author":{"@type":"Person","name":"Bani Waraich"},"datePublished":"2023-10-29T12:23:21+05:30","dateModified":"2023-11-10T12:52:13+05:30","name":"Salary Slip Format Excel &amp; PDF Sample","articleSection":"Human Resource (HR), Uncategorized","@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#schema-21344","isPartOf":{"@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#webpage"},"publisher":{"@id":"https://esahayak.io/#organization"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#webpage"}},{"@type":"Organization","@id":"https://esahayak.io/#organization","name":"eSahayak","url":"https://esahayak.io"},{"@type":"WebSite","@id":"https://esahayak.io/#website","url":"https://esahayak.io","name":"eSahayak","publisher":{"@id":"https://esahayak.io/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#webpage","url":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/","name":"Salary Slip Format Excel &amp; PDF Sample","datePublished":"2023-10-29T12:23:21+05:30","dateModified":"2023-11-10T12:52:13+05:30","isPartOf":{"@id":"https://esahayak.io/#website"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://esahayak.io/author/baniwaraich/","name":"Bani Waraich","url":"https://esahayak.io/author/baniwaraich/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/0015c5509a6f369bbb60b924905c6dc7?s=96&amp;d=mm&amp;r=g","url":"https://secure.gravatar.com/avatar/0015c5509a6f369bbb60b924905c6dc7?s=96&amp;d=mm&amp;r=g","caption":"Bani Waraich","inLanguage":"en-US"},"worksFor":{"@id":"https://esahayak.io/#organization"}},{"@type":"BlogPosting","headline":"Salary Slip Format Excel &amp; PDF Sample","keywords":"salary slip,salary slip format,excel format","datePublished":"2023-10-29T12:23:21+05:30","dateModified":"2023-11-10T12:52:13+05:30","articleSection":"Human Resource (HR), Uncategorized","author":{"@id":"https://esahayak.io/author/baniwaraich/","name":"Bani Waraich"},"publisher":{"@id":"https://esahayak.io/#organization"},"description":"Create a professional-looking salary slip for your employees starting this month! Learn all about the important details of a salary slip and the format.","name":"Salary Slip Format Excel &amp; PDF Sample","@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#richSnippet","isPartOf":{"@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#webpage"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://esahayak.io/blog/salary-slips-templates-download-formats-excel-pdf/#webpage"}}]}</script>

 */

type MetdataWithLDJSON = {
    ldJSON?: any
    canonical?: string
} & Metadata


const htmlHeadToMetadata = (htmlHead: string): MetdataWithLDJSON => {
    const metadata: MetdataWithLDJSON = {
        openGraph: {}
    }
    const dom = htmlToDOM(htmlHead)

    const metaTags = dom.filter(node => node.type === 'tag' && node.name === 'meta') as Element[]
    const linkTags = dom.filter(node => node.type === 'tag' && node.name === 'link') as Element[]
    const scriptTags = dom.filter(node => node.type === 'script') as Element[]

    const description = metaTags.find(node => node.attribs?.name === 'description')
    if (description) {
        metadata.description = description.attribs?.content
    }

    const robots = metaTags.find(node => node.attribs?.name === 'robots')
    if (robots) {
        metadata.robots = robots.attribs?.content
    }

    const canonical = linkTags.find(node => node.attribs?.rel === 'canonical')
    if (canonical) {
        metadata.canonical = canonical.attribs?.href
    }

    const ldJSON = scriptTags.find(node => node.attribs?.type === 'application/ld+json')

    if (ldJSON) {
        const textElement = ldJSON.children[0] as Text
        const ldJSONText = textElement.data
        metadata.ldJSON = ldJSONText
    }

    // Open Graph
    const ogLocale = metaTags.find(node => node.attribs?.property === 'og:locale')
    const openGraph: OpenGraph = {}
    if (ogLocale) {
        openGraph.locale = ogLocale.attribs?.content
    }

    const ogType = metaTags.find(node => node.attribs?.property === 'og:type')
    if (ogType) {
        // @ts-ignore
        openGraph.type = ogType.attribs?.content
    }

    const ogTitle = metaTags.find(node => node.attribs?.property === 'og:title')
    if (ogTitle) {
        openGraph.title = ogTitle.attribs?.content
        metadata.title = ogTitle.attribs?.content
    }

    const ogDescription = metaTags.find(node => node.attribs?.property === 'og:description')
    if (ogDescription) {
        openGraph.description = ogDescription.attribs?.content
    }

    const ogUrl = metaTags.find(node => node.attribs?.property === 'og:url')
    if (ogUrl) {
        openGraph.url = ogUrl.attribs?.content
    }

    const ogSiteName = metaTags.find(node => node.attribs?.property === 'og:site_name')

    if (ogSiteName) {
        openGraph.siteName = ogSiteName.attribs?.content
    }

    const ogUpdatedTime = metaTags.find(node => node.attribs?.property === 'og:updated_time')
    if (ogUpdatedTime) {
        // @ts-ignore
        openGraph.updatedTime = ogUpdatedTime.attribs?.content
    }

    const ogPublishedTime = metaTags.find(node => node.attribs?.property === 'article:published_time')
    if (ogPublishedTime) {
        // @ts-ignore
        openGraph.publishedTime = ogPublishedTime.attribs?.content
    }

    const ogModifiedTime = metaTags.find(node => node.attribs?.property === 'article:modified_time')
    if (ogModifiedTime) {
        // @ts-ignore
        openGraph.modifiedTime = ogModifiedTime.attribs?.content
    }

    const ogExpirationTime = metaTags.find(node => node.attribs?.property === 'article:expiration_time')
    if (ogExpirationTime) {
        // @ts-ignore
        openGraph.expirationTime = ogExpirationTime.attribs?.content
    }

    // Twitter
    const twitter: Twitter = {
        site: '@esahayakio'
    }
    const twitterCard = metaTags.find(node => node.attribs?.name === 'twitter:card')
    if (twitterCard) {
        // @ts-ignore
        twitter.card = twitterCard.attribs?.content
    }

    const twitterTitle = metaTags.find(node => node.attribs?.name === 'twitter:title')
    if (twitterTitle) {
        twitter.title = twitterTitle.attribs?.content
    }

    const twitterDescription = metaTags.find(node => node.attribs?.name === 'twitter:description')

    if (twitterDescription) {
        twitter.description = twitterDescription.attribs?.content
    }

    const twitterImage = metaTags.find(node => node.attribs?.name === 'twitter:image')

    if (twitterImage) {
        twitter.images = [
            twitterImage.attribs?.content
        ]
    }

    metadata.openGraph = openGraph
    metadata.twitter = twitter

    return metadata
}

export default htmlHeadToMetadata

yoast seo and nextjs please