Link Preview not working for Telegram And Whatsapp

Question

I am using CF workers to generate meta tags on the fly, I had done this before and then it seemed to work. But I am not getting it to work now, help would be appreciated. Below is my core code of how I process the request.

    async function handleRequest(event) {
    const { request } = event;
    const { pathname } = new URL(request.url);
  
    const ua = request.headers.get('User-agent')
    const username = pathname.split("/")[1];
    if(username != undefined){
            if(ua != null){
                if(ua.includes("TelegramBot") || ua.includes("bot") || ua.includes("TwitterBot") || ua.includes("WhatsApp") || ua.includes("facebook") || ua.includes("external") || ua.includes("MetaInspector")){
                    var req = await fetch(`https://prod.site.xyz/social/${username}`);
                    var res = await req.json();
                    if(res.error === undefined){
                      bio = res.bio ? res.bio : 'Join Site to have fun with me'
                      avatar = res.avatar ? res.avatar : 'https://assets.site.xyz/userutils/default-avatar.jpg'
                      name = res.name ? res.name : 'Mystery person'
                      url = `https://app.site.xyz/${username}`;
                    var content = '';
                    content += '<meta http-equiv="content-type" content="text/html; charset=utf-8"><meta property="og:title" content="'+name+'"/>';
                    content += '<meta property="og:description" content="'+ bio +'"/>';
                    content += '<meta property="og:image" content="'+avatar+'"/>';
                    content += '<meta property="og:url" content="'+url+'"/><meta property="og:type" content="website"/>';
                    return new Response(content);
                } else {
                                    url = `https://app.site.xyz/${username}`
    return new Response("", {status:302, headers:{location:url }});
                }
                } else {
                  url = `https://app.site.xyz/${username}`
    return new Response("", {status:302, headers:{location:url }});
}                } else {
                  url = `https://app.site.xyz/${username}`
    return new Response("", {status:302, headers:{location:url }});
             }
                   } else {
             new Response("", { status: 301, headers:{ location: "https://app.site.xyz"}})
     }
     
    }

Answer 1

Just add headers to your Response like so:

Response(content, headers: {
    'Content-Type': 'text/html'
});