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

0 votes

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 

Feb 23 in Others by Kichu
• 16,850 points
80 views

1 answer to this question.

0 votes
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
answered Feb 24 by narikkadan
• 7,860 points

Related Questions In Others

0 votes
1 answer
0 votes
1 answer

How to use for loop in Flutter?

Hi@akhtar, As the name suggests Dart for in ...READ MORE

answered Sep 3, 2020 in Others by MD
• 95,340 points
14,362 views
0 votes
1 answer

How to add meta keyword in wordpress using yoast seo plugin.?

if you dont want to use code ...READ MORE

answered Feb 12 in Others by narikkadan
• 7,860 points
76 views
0 votes
1 answer

Yoast Seo breadcrumbs: How to add custom text to category and tag name

use this code  add_filter('wpseo_breadcrumb_single_link', 'filter_breadcrumbs_for_h1', 10, 2); function filter_breadcrumbs_for_h1($link_output, ...READ MORE

answered Feb 12 in Others by narikkadan
• 7,860 points
58 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
339 views
0 votes
1 answer

Next seo test with react testing library

 you need to mock next/head, pass document.head to the container ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
87 views
0 votes
1 answer

How to make Component Variant in Google Optimize A/B testing in Next js

Render all the components in ReactJs after ...READ MORE

answered Feb 18 in Others by narikkadan
• 7,860 points
135 views
0 votes
1 answer

Next JS Seo with static pages, SSR Pages and Client Side rendering

Use getStaticProps()  with a revalidate property because sites ...READ MORE

answered Feb 20 in Others by narikkadan
• 7,860 points
149 views
0 votes
1 answer

how to show the <meta> values of yoast seo with some function?

check this folder : wordpress-seo\src\presenters\open-graph you can ...READ MORE

answered Feb 10 in Others by narikkadan
• 7,860 points
50 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP