How to use next-seo for setting nextjs meta tag with multiple OGP images

Question

Currently I have next-seo config file like below, but not sure how to switch OGP image when Twitter or normal website. I am using two OGP images in .gif and .png format, and want to use .gif as general OGP then twitter and facebook for .png asset.

// eslint-disable-next-line import/no-anonymous-default-export
export default {
    title: '',
    description:'',
    canonical: 'url',
    openGraph: {
        type: 'website',
        url: 'url',
        locale: 'en_US',
        site_name: '',
        title: '',
        description:'',
        defaultImageWidth: 1200,
        defaultImageHeight: 630,
        images: [
            {
                url: './ogp-1.gif',
                width: 1200,
                height: 630,
                alt: 'GIF OGP'
            }
            // Want to use this png image for twitter OGP
            // {
            //  url: '/ogp-2.png',
            //  width: 1200,
            //  height: 630,
            //  alt: 'PNG OGP'
            // }
        ],
        twitter: {
            handle: '@handle',
            site: 'url',
            cardType: 'summary'
        }
    }
}

According to the package documentation, I just have to set OGP image in oepnGraph section. I would like to know how to create a logic if current OGP should be .png or .gif depends on the user using the site URL in normal site 

Answer 1

https://github.com/garmeeh/next-seo use this git repo that contains all the steps to follow its has the step in order wise to just go through it and understand why  images in opengraph section matters  

 keep in mind to set OGP image in oepnGraph section