Image preview issues In og Tags

[Aravind-9989]

Summary

I was Unable to show the preview of Image

Additional information

import React from "react";
import ShareButtons from "@/app/components/reusbale/ShareButtons"; 
import Image from "next/image";

async function getProduct(productId: string) {
  const res = await fetch(
    `/api/product-add/get-product/${productId}`,
    {
      cache: "no-store",
    }
  );
  if (!res.ok) {
    throw new Error("Failed to fetch product details");
  }
  const data = await res.json();
  console.log("Fetched product data:", data);
  const product = data.product || (Array.isArray(data) ? data[0] : data);
  if (!product) throw new Error("Product not found");
  return product;
}
function getImageUrl(product: any) {
  const fallbackImage = "https://vcommercedev.s3.ap-southeast-1.amazonaws.com/61eA9PkZ07L._SX679_.jpg";
  let imageUrl = product.imageUrl || (product.images?.[0] ?? "");
  if (!imageUrl || typeof imageUrl !== "string" || imageUrl.trim() === "") {
    imageUrl = fallbackImage;
  } else if (!/^https?:\/\//.test(imageUrl)) {
    imageUrl = `https://vcommercedev.s3.ap-southeast-1.amazonaws.com/${imageUrl.replace(/^\/+/, "")}`;
  }
  console.log("Final public imageUrl for OG, Image, Share:", imageUrl);
  return imageUrl;
}

export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  const imageUrl = getImageUrl(product);
  return {
    title: product.name,
    description: product.description || "Check out this product!",
    openGraph: {
      title: product.name,
      description: product.description || "Check out this product!",
      url: `https://${product.subdomain || "customer"}.vseen.my/product/${product._id}`,
      images: [
        {
          url: imageUrl,  // Main image, must be absolute/public/HTTPS
          width: 1200,
          height: 630,
          alt: product.name,
        },
        {
          url: "https://vcommercedev.s3.ap-southeast-1.amazonaws.com/61eA9PkZ07L._SX400_.jpg",  // Fallback, make sure this is <100KB and always available!
          width: 400,
          height: 400,
          alt: "Fallback",
        }
      ]
    },
    twitter: {
      card: "summary_large_image",
      title: product.name,
      description: product.description || "Check out this product!",
      images: [imageUrl],
    },
    metadataBase: new URL(`https://${product.subdomain || "customer"}.vseen.my`),
  };
}


export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const resolvedParams = await params;
  const product = await getProduct(resolvedParams.id);
  const imageUrl = getImageUrl(product);
  const shareButtonsProps = {
    productName: product.name,
    productUrl: `https://customer.vcommerce.vseen.my/product/${product._id}`,
    productId: product._id,
    imageUrl,
    adminId: product.adminId || "admin-default",
    sharedById: product._id
  };
  console.log('ShareButtons props (ProductPage):', shareButtonsProps);
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">{product.name}</h1>
      <p className="my-2">{product.description}</p>
      <Image
        src={imageUrl}
        alt={product.name}
        className="w-full max-w-md rounded shadow-lg"
        width={500}
        height={500}
      />
      <ShareButtons {...shareButtonsProps} />
    </div>
  );
}

import React, { useState, useEffect } from "react";
import type { Product } from "./types";
import ShareButtons from "./ShareButtons";
import { useAuth } from "@/app/context/AuthContext";

interface ProductActionMenuProps {
  isOpen: boolean;
  anchorRef: React.RefObject<HTMLDivElement>;
  menuPosition: { top: number; left: number };
  product: Product;
  adminId: string;
  sharedById: string;
  onEdit: () => void;
  onToggleVisibility: () => void;
  onDelete?: () => void;
  onClose: () => void;
}

export const ProductActionMenu: React.FC<ProductActionMenuProps> = ({
  isOpen,
  anchorRef,
  menuPosition,
  product,
  onEdit,
  onToggleVisibility,
  onDelete,
}) => {
  const [showShare, setShowShare] = useState(false);
  const [shareData, setShareData] = useState<any>(null);
  const [loadingShare, setLoadingShare] = useState(false);
  const [errorShare, setErrorShare] = useState<string | null>(null);
  const { user } = useAuth();
  const [subdomain, setSubdomain] = useState<string | null>(null);

  useEffect(() => {
    async function fetchSubdomain() {
      if (!user?._id) return;
      try {
        const res = await fetch(`/api/getUserDetailsById/${user._id}`);
        const data = await res.json();
        if (res.ok && data.user?.subdomain) {
          setSubdomain(data.user.subdomain);
        } else {
          setSubdomain(null);
          console.warn("Subdomain not found for user:", user._id, data);
        }
      } catch (err) {
        setSubdomain(null);
        console.error("Error fetching subdomain:", err);
      }
    }
    fetchSubdomain();
  }, [user?._id]);

  const handleShare = async () => {
    setLoadingShare(true);
    setErrorShare(null);
    try {
      const productRes = await fetch(`/api/product-add/get-product/${product._id}`);
      const productDataRaw = await productRes.json();
      const productData =
        productDataRaw.product || (Array.isArray(productDataRaw) ? productDataRaw[0] : productDataRaw);
      if (!productData) throw new Error("Product not found");
      if (!productRes.ok) throw new Error(productData.error || "Failed to fetch product details");

      const shareType = user?.role === "admin" ? "admin" : "user";
      const sharePayload = {
        productId: productData._id,
        productName: productData.name,
        adminId: productData.createdBy,
        sharedById: user?._id,
        shareType,
        imageUrl: productData.images?.[0],
        subdomain,
      };

      console.log("sharePayload", sharePayload);
      const res = await fetch(`/api/shares`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(sharePayload),
      });
      
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Share failed");

      setShareData(data);
      setShowShare(true);
    } catch (err: any) {
      setErrorShare(err.message);
    } finally {
      setLoadingShare(false);
    }
  };

  if (!isOpen || !product) return null;

  return (
    <div
      ref={anchorRef}
      className="absolute w-52 bg-white rounded-lg shadow-lg z-20 border border-slate-200"
      style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
    >
      <div className="py-1 relative">
        {!showShare ? (
          <>
            <button
              onClick={onEdit}
              className="w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
            >
              Edit
            </button>

            <button
              onClick={handleShare}
              className="w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
              disabled={loadingShare}
            >
              {loadingShare ? "Sharing..." : "Share"}
            </button>

            <button
              onClick={onToggleVisibility}
              className="w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 cursor-pointer"
            >
              {product.visibility === "Active" ? "Deactivate" : "Activate"}
            </button>

            <button
              onClick={onDelete}
              className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-slate-100 cursor-pointer"
            >
              Delete
            </button>
          </>
        ) : (
          <div className="absolute top-0 left-0 w-52 bg-white border border-slate-200 rounded-lg shadow-md p-3 z-30">
            {(() => {
              const fullImageUrl = shareData.imageUrl && !/^https?:\/\//.test(shareData.imageUrl)
                ? `https://vcommercedev.s3.ap-southeast-1.amazonaws.com/${shareData.imageUrl.replace(/^\/+/, "")}`
                : shareData.imageUrl;
              const props = {
                imageUrl: fullImageUrl,
                productName: shareData.productName,
                productUrl: shareData.shareUrl,
                adminId: shareData.adminId,
                productId: shareData.productId,
                sharedById: shareData.sharedById
              };
              console.log('ShareButtons props (ProductActionMenu):', props);
              return <ShareButtons {...props} />;
            })()}
            <div className="mt-2 text-xs text-slate-500">Share Count: {shareData.shareCount}</div>

            <button
              onClick={() => setShowShare(false)}
              className="mt-2 w-full text-left text-xs text-blue-500 hover:underline"
            >
              Close
            </button>
          </div>
        )}

        {errorShare && <div className="text-xs text-red-500 mt-2">{errorShare}</div>}
      </div>
    </div>
  );
};

"use client";

import React, { useState } from "react";
import {
  Instagram,
  Facebook,
  Twitter,
  MessageCircle,
} from "lucide-react";
import { useAuth } from "@/app/context/AuthContext";

interface ShareButtonsProps {
  productName: string;
  productUrl: string;
  productId?: string;
  adminId?: string;
  sharedById?: string;
  imageUrl?: string;
}

export default function ShareButtons({
  productName,
  productUrl,
  productId,
  adminId,
  sharedById,
  imageUrl,
}: ShareButtonsProps) {
  const { user } =  useAuth()

  const baseShareUrl = productUrl || "";

  const [shareUrl, setShareUrl] = useState(baseShareUrl);
  const [shareCount, setShareCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchShareUrl = async () => {
    console.log('fetchShareUrl called with:', { productId, adminId, sharedById, productName, imageUrl });
    if (!productId || !adminId || !sharedById) {
      console.warn('Missing required props for sharing:', { productId, adminId, sharedById });
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const shareType = user?.role === "admin" ? "admin" : "user";
      const res = await fetch("/api/shares", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          productId,
          productName,
          adminId,
          sharedById,
          shareType,
          imageUrl,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Share failed");
      console.log('Share API response:', data);
      const finalUrl = data.shareUrl;
      setShareUrl(finalUrl);
      setShareCount(data.shareCount || 1);
      return finalUrl;
    } catch (err: any) {
      setError(err.message);
      console.error('Error in fetchShareUrl:', err);
      return baseShareUrl;
    } finally {
      setLoading(false);
    }
  };

  const handleShare = async (
    platform: "whatsapp" | "instagram" | "twitter" | "facebook"
  ) => {
    console.log('Share button clicked:', platform);
    let urlToShare = baseShareUrl;
    if (productId && adminId && sharedById) {
      urlToShare = (await fetchShareUrl()) ?? baseShareUrl;
    }
  const msg = `Check out this product: ${productName} - ${urlToShare}`;
    console.log('Sharing message:', msg);
    switch (platform) {
      case "whatsapp":
        window.open(
          `https://wa.me/?text=${encodeURIComponent(msg)}`,
          "_blank"
        );
        break;
      case "instagram":
        if (navigator.share) {
          try {
            await navigator.share({
              title: productName,
              text: msg,
              url: urlToShare,
            });
          } catch (e) {
            console.error('Error sharing via Instagram:', e);
          }
        } else {
          try {
            await navigator.clipboard.writeText(urlToShare);
            alert("Link copied! Paste it inside Instagram.");
          } catch (e) {
            alert("Unable to copy. Please copy manually.");
            console.error('Clipboard copy failed:', e);
          }
        }
        break;
      case "twitter":
        window.open(
          `https://twitter.com/intent/tweet?text=${encodeURIComponent(
            msg
          )}`,
          "_blank"
        );
        break;
      case "facebook":
        window.open(
          `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
            urlToShare
          )}`,
          "_blank"
        );
        break;
    }
  };

  return (
  <div className="flex flex-col items-center">
      <button
        onClick={() => handleShare("whatsapp")}
        className="flex items-center px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
        disabled={loading}
      >
        <MessageCircle size={16} className="mr-2 text-green-600" />
        {loading ? "Sharing..." : "Share on WhatsApp"}
      </button>

      <button
        onClick={() => handleShare("instagram")}
        className="flex items-center px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
        disabled={loading}
      >
        <Instagram size={16} className="mr-2 text-pink-500" />
        {loading ? "Sharing..." : "Share on Instagram"}
      </button>

      <button
        onClick={() => handleShare("twitter")}
        className="flex items-center px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
        disabled={loading}
      >
        <Twitter size={16} className="mr-2 text-sky-500" />
        {loading ? "Sharing..." : "Share on Twitter"}
      </button>

      <button
        onClick={() => handleShare("facebook")}
        className="flex items-center px-4 py-2 text-sm text-slate-700 hover:bg-slate-100"
        disabled={loading}
      >
        <Facebook size={16} className="mr-2 text-blue-600" />
        {loading ? "Sharing..." : "Share on Facebook"}
      </button>

      {imageUrl && (
        <div className="mt-4">
          <img
            src={imageUrl}
            alt={productName}
            style={{ maxWidth: '100px', maxHeight: '100px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
          />
          <div className="text-xs text-slate-500 mt-1">Image Preview</div>
        </div>
      )}
      {shareCount !== null && (
        <div className="mt-2 text-xs text-slate-500">
          Share Count: {shareCount}
        </div>
      )}
      {error && (
        <div className="mt-2 text-xs text-red-500">{error}</div>
      )}
    </div>
  );
}

Example

No response

[Lochy2000]

This is a very common issue when setting up Open Graph (OG) tags in Next.js. The problem is usually not in the image URL construction itself, but in when and how the social media bots access the image.

try this

• Use Absolute API URLs: Change the fetch call in getProduct to use an absolute URL when running on the server. You can use an environment variable for the base URL.

Example: await fetch(
process.env.NEXT process.env.NEXT PUBLIC BASE URL/api/product−add/get−product/{productId})

• Verify Image with a Debugger: Run your product URL through a social media validator (Facebook Sharing Debugger is the best starting point).

• Simplify images Array: Ensure the image returned by getImageUrl is publicly accessible and meets the standard requirements (under 5MB, usually less than 1200x630px).

[Aravind-9989]

i was tried
but even the product/id page is not calling i was tried using debugging but it was not working

[icyJoseph]

@Aravind-9989 what is the issue though? What did you do to arrive at that conclusion.

You can find the metadata in the HTML and from there try to load the link showed. Are you using any special open-graph preview tool?

[Aravind-9989]

Yes I was Using Og to preview