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" /> <html lang="en" />
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:site_name" content={title} /> <meta property="og:site_name" content={title} />
<meta property="og:image" content={metaImageUrl} /> <meta property="og:image" content={metaImageUrl} />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} /> <meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} /> <meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} /> <meta name="twitter:image" content={metaImageUrl} />
<meta property="twitter:site" content="@mastermindzh" />
{noIndex && <meta name="robots" content="noindex" />} {noIndex && <meta name="robots" content="noindex" />}
</Helmet> </Helmet>
{children} {children}

View File

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