Next.js Discord

Discord Forum

Discord Scraper Not Fetching Dynamic OGP/Twitter Card Data

Unanswered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
I have a issue with discord fetching the OGP values, when I use any other tool it shows valid OGP values however when I use the [Discord Embed Visualiser](https://discord.com/developers/embeds) it shows "Error Timed out" even though on other sites it takes little time to render it. My code fetches data from a API before placing it in the metadata tag. I think it may be a issue with discord's cache or something like that but am unaware of how to fix this as a discord preview is a reason I migrated to next.js.

What would help me most is some boilerplate code of fetching data from a api and setting it as metadata.

2 Replies

Philippine CrocodileOP
Code in 2 snippets as its too long for 1 large box also removed some stuff as its too long

import ArticleDetails from './displayData';

export const generateMetadata = async ({ params }) => {
  try {
    const response = await fetch(`API_ENDPOINT`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ hash: params.hash }), 
    });

    if (!response.ok) {
      console.error(`Failed to fetch article data: ${response.status} - ${response.statusText}`);
      return {
        title: 'Page Not Found (404)',
        description: 'Page Not Found (404)',
        openGraph: {
          title: 'Page Not Found (404)',
          description: 'Page Not Found (404)',
          images: [
            {
              url: 'https://cdn.glitch.global/21a2d050-b3c7-4611-8e67-c6f3ae33f0df/favicon.png?v=1720056814938',
              width: 500,
              height: 500,
              alt: 'preview image',
            },
          ],
          url: 'https://website.com',
          type: 'website',
        },
        twitter: {
          card: 'summary_large_image',
          title: 'Page Not Found (404)',
          description: 'Page Not Found (404)',
          images: [
            'https://cdn.glitch.global/21a2d050-b3c7-4611-8e67-c6f3ae33f0df/favicon.png?v=1720056814938',
          ],
        },
      };
    }
js
const data = await response.json();
const entry = data.entry;
console.log(entry);


};
```
export default async function pageHash({ params }) {
  const hash = params.hash;

  try {
    const [response, metadata] = await Promise.all([
      fetch(`API_ENDPOINT`, {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ hash }),
      }),
      await generateMetadata({ params }),
    ]);

    if (!response.ok) {
      console.error(`Failed to fetch article data: ${response.status} - ${response.statusText}`);
      return (
        <>
          <div className="page">
            <div className="hitbox">
              <h1>404</h1>
              <p>Page Not Found</p>
            </div>
          </div>
        </>
      );
    }

    const data = await response.json();
    const entry = data.entry;

    const props = {
      name: entry.name,
      hash,
      className: entry.class,
      chemicalFormulaHtml: entry.chemical_formula_html,
      molecularFormulaHtml: entry.molecular_formula_html,
      molecularWeight: entry.molecular_weight,
      optimalConc: entry.optimal_conc,
      structureImage: entry.structure_image,
      casNumber: entry.cas_number,
      safetyDocumentSheet: entry.safety_document_sheet,
      htmlText: entry.html_text,
      pricingInfo: entry.pricing_info,
    };

    return (
      <>
        <ArticleDetails {...props} />
      </>
    );
  } catch (error) {
    console.error('Error in pageHash function:', error);
    return (
      <>
        <div className="page">
          <div className="hitbox">
            <h1>500</h1>
            <p>Internal Server Error</p>
          </div>
        </div>
      </>
    );
  }
}