Next.js ਓਪਨ ਗ੍ਰਾਫ਼ (Open Graph) ਚਿੱਤਰ ਕੰਮ ਨਹੀਂ ਕਰ ਰਿਹਾ ਹੈ

ਜ਼ਿਆਦਾਤਰ Next.js ਪ੍ਰੀਵਿਊ ਬੱਗ Metadata API ਤੋਂ ਆਉਂਦੇ ਹਨ: ਗੁੰਮ ਹੋਇਆ metadataBase, ਇੱਕ openGraph ਆਬਜੈਕਟ ਜੋ ਮੂਲ (parent) ਆਬਜੈਕਟ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਜਾਂ ਸੀਮਾ ਤੋਂ ਵੱਡੀ ਇੱਕ ਚਿੱਤਰ ਫ਼ਾਈਲ।

ਆਖਰੀ ਵਾਰ ਅੱਪਡੇਟ ਕੀਤਾ ਗਿਆ

ਆਪਣਾ URL ਚੈੱਕ ਕਰੋ

ਪੂਰਵ-ਦਰਸ਼ਨ ਤਾਜ਼ਾ ਕਰੋ

ਟੈਗ ਤਿਆਰ ਕਰੋ

ਤੁਰੰਤ ਹੱਲ


  1. ਰੂਟ ਲੇਆਉਟ ਵਿੱਚ metadataBase ਸੈੱਟ ਕਰੋ ਤਾਂ ਜੋ ਸੰਬੰਧਿਤ ਚਿੱਤਰ ਮਾਰਗ (image paths) ਪੂਰਨ URLs ਬਣ ਜਾਣ।

  2. ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਵਾਲੇ ਕਿਸੇ ਵੀ ਪੰਨੇ 'ਤੇ ਪੂਰੇ openGraph ਆਬਜੈਕਟ ਨੂੰ ਦੁਹਰਾਓ।

  3. opengraph-image ਨੂੰ 8 MB ਤੋਂ ਘੱਟ ਅਤੇ twitter-image ਨੂੰ 5 MB ਤੋਂ ਘੱਟ ਰੱਖੋ।

  4. ਤੈਨਾਤ (deployed) ਕੀਤੇ ਗਏ URL ਦੀ ਜਾਂਚ ਮੈਟਾ ਟੈਗ ਚੈਕਰ ਨਾਲ ਕਰੋ, localhost ਨਾਲ ਨਹੀਂ।


Next.js ਪ੍ਰੀਵਿਊ ਗੁੰਮ ਜਾਂ ਗਲਤ ਕਿਉਂ ਹੈ

  • metadataBase ਤੋਂ ਬਿਨਾਂ ਰਿਲੇਟਿਵ ਚਿੱਤਰ ਮਾਰਗ। metadataBase ਤੋਂ ਬਿਨਾਂ URL-ਅਧਾਰਿਤ ਮੈਟਾਡੇਟਾ ਖੇਤਰ ਵਿੱਚ ਇੱਕ ਰਿਲੇਟਿਵ URL ਇੱਕ ਬਿਲਡ ਗਲਤੀ (build error) ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ, ਅਤੇ ਪਲੇਟਫਾਰਮ ਵੈਸੇ ਵੀ ਰਿਲੇਟਿਵ ਮਾਰਗਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕਰ ਸਕਦੇ।

  • ਇੱਕ ਪੰਨਾ openGraph ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦਾ ਹੈ ਅਤੇ ਚਿੱਤਰ ਗੁਆ ਦਿੰਦਾ ਹੈ। ਖਾਕੇ (layouts) ਅਤੇ ਪੰਨਿਆਂ ਤੋਂ ਮੈਟਾਡੇਟਾ ਨੂੰ ਥੋੜ੍ਹੇ ਜਿਹੇ ਪੱਧਰ 'ਤੇ ਮਿਲਾਇਆ (shallow merged) ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਇੱਕ ਪੰਨੇ ਦਾ openGraph ਆਬਜੈਕਟ ਖਾਕੇ ਦੇ ਪੂਰੇ openGraph ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਚਿੱਤਰ ਵੀ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ।

  • ਚਿੱਤਰ ਫ਼ਾਈਲ ਬਹੁਤ ਵੱਡੀ ਹੈ। opengraph-image 8 MB ਤੋਂ ਘੱਟ ਅਤੇ twitter-image 5 MB ਤੋਂ ਘੱਟ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਨਹੀਂ ਤਾਂ ਬਿਲਡ ਅਸਫਲ ਹੋ ਜਾਂਦੀ ਹੈ।

  • ਤੁਸੀਂ localhost ਜਾਂ ਕਿਸੇ ਸੁਰੱਖਿਅਤ ਪ੍ਰੀਵਿਊ ਡਿਪਲਾਇਮੈਂਟ 'ਤੇ ਟੈਸਟ ਕੀਤਾ ਹੈ। ਪਲੇਟਫਾਰਮ ਆਪਣੇ ਖੁਦ ਦੇ ਸਰਵਰਾਂ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ ਅਤੇ ਇਸ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦੇ।

  • ਪਲੇਟਫਾਰਮ ਨੇ ਪਿਛਲੇ ਡਿਪਲਾਏ ਨੂੰ ਕੈਸ਼ ਕਰ ਲਿਆ ਹੈ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ।

ਇਸਨੂੰ ਕਿਵੇਂ ਠੀਕ ਕਰਨਾ ਹੈ

  1. app/layout.tsx ਵਿੱਚ, metadataBase: new URL('https://your-domain.com') ਸੈੱਟ ਕਰੋ।

  2. ਜਦੋਂ ਕੋਈ ਪੰਨਾ openGraph ਸੈੱਟ ਕਰਦਾ ਹੈ, ਤਾਂ images ਨੂੰ ਦੁਬਾਰਾ ਸ਼ਾਮਲ ਕਰੋ, ਜਾਂ generateMetadata ਤੋਂ ਮੂਲ ਚਿੱਤਰਾਂ ਨੂੰ ਸਪ੍ਰੈੱਡ ਕਰੋ।

  3. ਜਾਂ ਰੂਟ ਹਿੱਸੇ ਵਿੱਚ ਇੱਕ opengraph-image.png ਫ਼ਾਈਲ ਸ਼ਾਮਲ ਕਰੋ। Next.js ਤੁਹਾਡੇ ਲਈ og:image, ਇਸਦੀ ਕਿਸਮ, ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਆਪਣੇ ਆਪ ਜੋੜ ਦਿੰਦਾ ਹੈ।

  4. ਜਨਰੇਟ ਕੀਤੇ ਗਏ ਚਿੱਤਰਾਂ ਲਈ, next/og ਤੋਂ ImageResponse ਦੀ ਵਰਤੋਂ size = { width: 1200, height: 630 } ਦੇ ਨਾਲ ਕਰੋ।

  5. ਡਿਪਲਾਏ ਕਰੋ, ਫਿਰ ਮੈਟਾ ਟੈਗ ਚੈਕਰ ਨਾਲ ਜਨਤਕ URL ਦੀ ਜਾਂਚ ਕਰੋ।

ਟੈਗਸ ਜੋ Next.js ਨੂੰ ਆਊਟਪੁੱਟ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨ

  • og:title, og:description, og:url

  • og:image ਦੇ ਨਾਲ og:image:width, og:image:height ਅਤੇ og:image:type

  • opengraph-image.alt.txt ਤੋਂ og:image:alt

  • twitter:card ਅਤੇ twitter:image (ਪੂਰਾ URL)

ਤੁਸੀਂ ਮੈਟਾ ਟੈਗ ਜਨਰੇਟਰ ਨਾਲ ਇਹਨਾਂ ਨੂੰ ਖੁਦ ਲਿਖ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਬਿਲਡ ਨਾਲ ਤੁਲਨਾ ਕਰ ਸਕਦੇ ਹੋ।

ਚਿੱਤਰ ਆਕਾਰ ਦੇ ਨਿਯਮ

  • opengraph-image: .jpg, .jpeg, .png ਜਾਂ .gif, ਵੱਧ ਤੋਂ ਵੱਧ 8 MB

  • twitter-image: ਉਹੀ ਕਿਸਮਾਂ, ਵੱਧ ਤੋਂ ਵੱਧ 5 MB

  • 1200 x 630 px ਉਹ ਆਕਾਰ ਹੈ ਜੋ Next.js ਆਪਣੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਵਰਤਦਾ ਹੈ

ਸਟ੍ਰੀਮਿੰਗ ਮੈਟਾਡੇਟਾ ਅਤੇ ਕ੍ਰਾਲਰ

ਨਵੇਂ Next.js ਸੰਸਕਰਣ generateMetadata ਤੋਂ ਮੈਟਾਡੇਟਾ ਨੂੰ ਬਾਡੀ ਵਿੱਚ ਸਟ੍ਰੀਮ ਕਰ ਸਕਦੇ ਹਨ। HTML-ਸੀਮਤ ਬੋਟਾਂ ਜਿਵੇਂ ਕਿ facebookexternalhit ਲਈ, Next.js ਅਜੇ ਵੀ ਰੈਂਡਰਿੰਗ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਟੈਗਸ ਨੂੰ ਹੈੱਡ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਇਹ ਯੂਜ਼ਰ ਏਜੰਟ ਦੁਆਰਾ ਇਹਨਾਂ ਬੋਟਾਂ ਦਾ ਪਤਾ ਲਗਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ next.config ਵਿੱਚ htmlLimitedBots ਨਾਲ ਇਸ ਸੂਚੀ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ।

ਰਿਫ੍ਰੈਸ਼ ਨੂੰ ਕਿਵੇਂ ਮਜਬੂਰ ਕਰਨਾ ਹੈ

Next.js ਕਿਸੇ ਹੋਰ ਪਲੇਟਫਾਰਮ ਦੇ ਕੈਸ਼ ਨੂੰ ਸਾਫ਼ ਨਹੀਂ ਕਰ ਸਕਦਾ। ਡਿਪਲਾਏ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹਰੇਕ ਪਲੇਟਫਾਰਮ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ: LinkedIn ਲਈ ਪੋਸਟ ਇੰਸਪੈਕਟਰ (Post Inspector), Facebook ਲਈ ਸ਼ੇਅਰਿੰਗ ਡੀਬੱਗਰ (Sharing Debugger), X, Slack ਅਤੇ Discord ਲਈ ਇੱਕ ਨਵੀਂ ਕਿਊਰੀ ਸਟ੍ਰਿੰਗ। ਰਿਫ੍ਰੈਸ਼ ਟੂਲ ਵਿੱਚ ਇਹ ਸਾਰੇ ਸ਼ਾਮਲ ਹਨ।

ਸਰੋਤ

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਮੇਰਾ Next.js og:image ਇੱਕ ਰਿਲੇਟਿਵ (relative) URL ਕਿਉਂ ਹੈ?

metadataBase ਸੈੱਟ ਨਹੀਂ ਹੈ। ਇਸਨੂੰ ਰੂਟ ਲੇਆਉਟ ਵਿੱਚ ਸੈੱਟ ਕਰੋ ਤਾਂ ਜੋ Next.js ਰਿਲੇਟਿਵ ਮਾਰਗਾਂ (relative paths) ਨੂੰ ਪੂਰੇ URLs (absolute URLs) ਵਿੱਚ ਬਦਲ ਸਕੇ।

ਮੇਰੇ ਪੇਜ ਤੋਂ ਲੇਆਉਟ ਵਾਲੀ og:image ਕਿਉਂ ਹਟ ਜਾਂਦੀ ਹੈ?

Next.js ਮੈਟਾਡੇਟਾ ਨੂੰ ਸ਼ੈਲੋ (shallow) ਤਰੀਕੇ ਨਾਲ ਮਿਲਾਉਂਦਾ ਹੈ। ਜੇਕਰ ਕੋਈ ਪੇਜ openGraph ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਲੇਆਉਟ ਦੇ openGraph ਆਬਜੈਕਟ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਪੇਜ ਵਿੱਚ ਤਸਵੀਰਾਂ ਨੂੰ ਦੁਬਾਰਾ ਸ਼ਾਮਲ ਕਰੋ।

Next.js ਵਿੱਚ opengraph-image ਲਈ ਫ਼ਾਈਲ ਸਾਈਜ਼ ਦੀ ਸੀਮਾ ਕੀ ਹੈ?

opengraph-image ਲਈ 8 MB ਅਤੇ twitter-image ਲਈ 5 MB। ਇਸ ਤੋਂ ਵੱਡੀਆਂ ਫ਼ਾਈਲਾਂ ਬਿਲਡ ਨੂੰ ਅਸਫਲ ਕਰ ਦਿੰਦੀਆਂ ਹਨ।

ਆਪਣਾ ਪੰਨਾ ਦੇਖੋ, ਫਿਰ ਪ੍ਰੀਵਿਊ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ

ਹਰੇਕ ਐਪ ਦੁਆਰਾ ਪੜ੍ਹੇ ਜਾਣ ਵਾਲੇ ਸਹੀ ਟੈਗ ਦੇਖਣ ਲਈ ਆਪਣਾ URL ਮੁਫ਼ਤ ਚੈਕਰ ਵਿੱਚ ਪੇਸਟ ਕਰੋ। ਟੈਗ ਸਹੀ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਪੁਰਾਣੇ ਪ੍ਰੀਵਿਊ ਨੂੰ ਹਟਾਉਣ ਲਈ ਰਿਫ੍ਰੈਸ਼ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਆਪਣਾ URL ਚੈੱਕ ਕਰੋ

ਪੂਰਵਦਰਸ਼ਨ ਤਾਜ਼ਾ ਕਰੋ

ਟੈਗ ਤਿਆਰ ਕਰੋ

ਸੰਬੰਧਿਤ ਗਾਈਡਾਂ

X (Twitter) ਕਾਰਡ ਦਿਖਾਈ ਨਹੀਂ ਦੇ ਰਿਹਾ ਜਾਂ ਅੱਪਡੇਟ ਨਹੀਂ ਹੋ ਰਿਹਾ ਹੈ

X twitter: ਟੈਗਸ ਤੋਂ ਕਾਰਡ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਲੋੜ ਪੈਣ 'ਤੇ og: ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਹੁਣ ਅਜਿਹਾ ਕੋਈ ਵੈਲੀਡੇਟਰ ਨਹੀਂ ਹੈ ਜੋ ਕੈਸ਼ੇ (cache) ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੇ, ਇਸ ਲਈ ਇਸਦਾ ਹੱਲ ਸਹੀ ਟੈਗਸ ਅਤੇ ਇੱਕ ਨਵਾਂ URL ਹੀ ਹੈ।

Framer ਸੋਸ਼ਲ ਪ੍ਰੀਵਿਊ ਅੱਪਡੇਟ ਨਹੀਂ ਹੋ ਰਿਹਾ ਹੈ

Framer ਸਾਈਟ-ਪੱਧਰੀ ਸੋਸ਼ਲ ਪ੍ਰੀਵਿਊ, ਪੰਨੇ ਦੇ ਓਵਰਰਾਈਡ ਅਤੇ ਪ੍ਰਤੀ-ਆਈਟਮ CMS ਚਿੱਤਰ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਨਵੀਂ ਤਸਵੀਰ ਲਾਈਵ ਹੈ ਪਰ ਪੁਰਾਣੀ ਅਜੇ ਵੀ ਦਿਖਾਈ ਦੇ ਰਹੀ ਹੈ, ਤਾਂ ਇਸਦਾ ਕਾਰਨ ਪਲੇਟਫਾਰਮ ਦਾ ਕੈਸ਼ (cache) ਹੈ।

Webflow ਓਪਨ ਗ੍ਰਾਫ ਚਿੱਤਰ ਕੰਮ ਨਹੀਂ ਕਰ ਰਿਹਾ ਹੈ

Webflow ਓਪਨ ਗ੍ਰਾਫ (Open Graph) ਨੂੰ ਹਰੇਕ ਪੰਨੇ ਮੁਤਾਬਕ ਸੈੱਟ ਕਰਦਾ ਹੈ, ਕਦੇ ਵੀ ਵਿਆਪਕ ਤੌਰ 'ਤੇ (ਗਲੋਬਲੀ) ਨਹੀਂ। CMS ਟੈਂਪਲੇਟ ਪੰਨਿਆਂ ਲਈ ਇੱਕ ਚਿੱਤਰ (Image) ਫੀਲਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਉਸ ਸੰਗ੍ਰਹਿ (ਕਲੈਕਸ਼ਨ) ਵਿੱਚ ਮੌਜੂਦ ਹਰੇਕ ਚਿੱਤਰ ਦਾ ਆਕਾਰ ਇੱਕੋ ਜਿਹਾ ਹੋਣਾ ਲਾਜ਼ਮੀ ਹੈ।