Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve social media presence #93

Open
KasperiP opened this issue Apr 6, 2023 · 4 comments
Open

Improve social media presence #93

KasperiP opened this issue Apr 6, 2023 · 4 comments

Comments

@KasperiP
Copy link
Member

KasperiP commented Apr 6, 2023

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
Copy link
Member

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
Copy link
Contributor

antoKeinanen commented Jun 14, 2023 •
edited

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
Copy link
Member Author

KasperiP commented Jun 15, 2023 •
edited

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.

@ahnl
Copy link
Member

ahnl commented Jun 23, 2023

FYI:

OpenGraph already implemented in following routes:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@KasperiP @Eldemarkki @ahnl @antoKeinanen