fix: added opengraph tags

This commit is contained in:
Rick van Lieshout 2023-06-28 23:56:32 +02:00
parent bebfe1638e
commit e6ebd5b79f
2 changed files with 27 additions and 13 deletions

View File

@ -30,12 +30,14 @@ const Layout: React.FC<Props> = ({
<html lang="en" />
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={title} />
<meta property="og:image" content={metaImageUrl} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
<meta property="twitter:site" content="@mastermindzh" />
{noIndex && <meta name="robots" content="noindex" />}
</Helmet>
{children}

View File

@ -1,5 +1,7 @@
import type { Node } from "@/types";
import React from "react";
import { Helmet } from "react-helmet";
import { useSiteMetadata } from "../../hooks";
import { Author } from "./Author";
import { Comments } from "./Comments";
import { Content } from "./Content";
@ -14,24 +16,34 @@ interface Props {
const Post: React.FC<Props> = ({ post }: Props) => {
const { html } = post;
const { tagSlugs, slug, readingTime } = post.fields;
const { tags, title, date, disqusId } = post.frontmatter;
const { tags, title, date, disqusId, category } = post.frontmatter;
const { url } = useSiteMetadata();
return (
<div className={styles.post}>
<div className={styles.content}>
<Content body={html} title={title} subTitle={readingTime?.text} />
</div>
<>
<Helmet>
<meta property="og:type" content="article" />
<meta property="article:publisher" content={url} />
<meta property="article:section" content={category} />
<meta property="article:tag" content={tags ? tags[0] : ""} />
</Helmet>
<div className={styles.footer}>
<Meta date={date} />
{tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
<Author />
</div>
<div className={styles.post}>
<div className={styles.content}>
<Content body={html} title={title} subTitle={readingTime?.text} />
</div>
<div className={`${styles.comments} hideInPrintView`}>
<Comments disqusId={disqusId} postSlug={slug} postTitle={post.frontmatter.title} />
<div className={styles.footer}>
<Meta date={date} />
{tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
<Author />
</div>
<div className={`${styles.comments} hideInPrintView`}>
<Comments disqusId={disqusId} postSlug={slug} postTitle={post.frontmatter.title} />
</div>
</div>
</div>
</>
);
};