Testausserveri/testausserveri.fi

Improve social media presence

KasperiP opened this issue · 4 comments

KasperiP commented

The links to Testausserveri could be improved on several platforms by adding OpenGraph and Twitter meta tags. Currently, only projects have OpenGraph meta tags, but in my opinion, the main page should also be visually appealing on social media. For example, a graphic of Testausserveri could be displayed when the page is linked. 😸

Reference:
image

Eldemarkki commented

If we migrate to the Next.js App Router (currently beta, but soon stable), there is a pretty nice Metadata API that can be used for this.

https://beta.nextjs.org/docs/api-reference/metadata

antoKeinanen commented

I implemented something like this for a project I was working on. It could also work well here.

export default function Meta({
  title,
  description,
  image,
  url,
  contentType,
}: Meta) {
  if (!url && typeof window !== "undefined") {
    url = window.location.href;
  }

  return (
    <Head>
      {/* Content metadata */}
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="description" content={description} />

      {/* Open Graph metadata*/}
      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content={contentType || "website"} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />

      {/* Twitter metadata */}
      <meta name="twitter:title" content={title} />
      <meta property="twitter:url" content={url} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
    </Head>
  );
}
KasperiP commented

As @Eldemarkki already mentioned app router has new metadata API and since app router is now stable I don't see any point using the old way.