Displaying or changing the URL / Displaying Metadata Cards with URL

My stack is Apache Next Vercel and Google Cloud, the Apache server is packaged with my domain pleyland.co.za, which redirects to my vercel page. I did this in order to have server-side rendering, and the only reason I keep my apache server is to store images and documents, and also for the domain that I pay Afrihost for.

I have share buttons that use the main URL, pleyland, but the displayed URL is the strange vercel URL that does not work with my metadata cards, which is why I implemented server-side rendering to begin with. The metadata is important for sharing parts of the website as it displays a preview image of what the website is on twitter and similar websites.

If users use the share buttons all is well, but if they decide to copy the URL directly the cards will not work.

I either need to get the cards working with the vercel URL or alternatively get the URL to change to pleyland.co.za when the user clicks on it

Hi, Pleyland! Great to see you around the community again

The recommended solution is to properly integrate your domain directly with Vercel instead of using Apache as an intermediary.

This involves adding pleyland.co.za in Vercel's dashboard under domain settings and updating your DNS records to point directly to Vercel . Then, configuring your Next.js metadata with your domain as the base URL, and adding a rewrite rule in vercel.json to ensure Vercel URLs automatically show as your custom domain.

For your existing Apache-hosted assets, either migrate them to Vercel or create a separate subdomain (like assets.pleyland.co.za) pointing to your Apache server, while keeping your main domain on Vercel.

This approach will resolve the metadata card issues, ensure proper HTTPS support, and maintain a consistent domain appearance while preserving access to your hosted files.

Let us know how you get on!