-
Notifications
You must be signed in to change notification settings - Fork 20
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.
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
Improve social media presence #93
Comments
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. |
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>
);
} |
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. |
FYI: OpenGraph already implemented in following routes: |
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](https://user-images.githubusercontent.com/26027985/230318038-fd02def6-6e85-4952-97af-8ff31de6c103.png)
The text was updated successfully, but these errors were encountered: