Skip to content

Commit 953ca9a

Browse files
portableantportableant
committed
Refactor: amend social cards
1 parent 9bce510 commit 953ca9a

File tree

4 files changed

+63
-45
lines changed

4 files changed

+63
-45
lines changed

‎src/components/structure/SEO.js‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,51 @@
1-
import React from "react"
2-
import { useSiteMetadata } from "../../hooks/use-site-metadata"
1+
import React from "react";
2+
import { useSiteMetadata } from "../../hooks/use-site-metadata";
33

44
function createSeoImage(featured, image) {
5-
if (featured) {
6-
return featured?.childImageSharp.gatsbyImageData.images.fallback.src;
7-
}
8-
return image;
5+
if (featured) {
6+
return featured?.childImageSharp.gatsbyImageData.images.fallback.src;
7+
}
8+
return image;
99
}
1010

1111
const Seo = ({ title, description, pathname, children, featured }) => {
12-
const { title: defaultTitle, description: defaultDescription, image, siteUrl, twitterHandle } = useSiteMetadata()
13-
const featuredImage = createSeoImage(featured,image);
14-
const seo = {
15-
title: title || defaultTitle,
16-
description: description || defaultDescription,
17-
image: `${siteUrl}${featuredImage}`,
18-
url: `${siteUrl}${pathname || ``}`,
19-
twitterHandle,
20-
}
12+
const { title: defaultTitle, description: defaultDescription, image, siteUrl, twitterHandle } = useSiteMetadata();
13+
console.log(featured);
14+
const featuredImage = createSeoImage(featured, image);
15+
const seo = {
16+
title: title || defaultTitle,
17+
description: description || defaultDescription,
18+
image: `${siteUrl}${featuredImage}`,
19+
url: `${siteUrl}${pathname || ``}`,
20+
twitterHandle
21+
};
2122

22-
return (
23-
<>
24-
<title>{seo.title}</title>
25-
<meta name="description" content={seo.description} />
26-
<meta name="image" content={seo.image} />
27-
<meta name="twitter:card" content="summary_large_image" />
28-
<meta name="twitter:title" content={seo.title} />
29-
<meta name="twitter:url" content={seo.url} />
30-
<meta name="twitter:description" content={seo.description} />
31-
<meta name="twitter:image" content={seo.image} />
32-
<meta name="twitter:creator" content={seo.twitterHandle} />
33-
<meta property="og:url" content={seo.url.toString()} />
34-
<meta property="og:title" content={seo.title} />
35-
<meta property="og:type" content="website" />
36-
<meta property="og:site_name" content="Museologi.st" />
37-
<meta property="og:description" content={seo.description} />
38-
<meta property="og:locale" content="en-gb" />
39-
<meta property="og:image" content={seo.image.toString()} />
40-
<meta property="og:image:alt" content="An image representing this post" />
41-
<meta property="og:image:width" content="600"/>
42-
<meta property="og:image:width" content="600" />
43-
<meta property="og:image:type" content="image/jpeg" />
44-
{children}
45-
</>
46-
)
47-
}
4823

49-
export default Seo
24+
return (
25+
<>
26+
<title>{seo.title}</title>
27+
<meta name="description" content={seo.description} />
28+
<meta name="image" content={seo.image} />
29+
<meta name="twitter:card" content="summary_large_image" />
30+
<meta name="twitter:title" content={seo.title} />
31+
<meta name="twitter:url" content={seo.url} />
32+
<meta name="twitter:description" content={seo.description} />
33+
<meta name="twitter:image" content={seo.image} />
34+
<meta name="twitter:creator" content={seo.twitterHandle} />
35+
<meta property="og:url" content={seo.url.toString()} />
36+
<meta property="og:title" content={seo.title} />
37+
<meta property="og:type" content="website" />
38+
<meta property="og:site_name" content="Museologi.st" />
39+
<meta property="og:description" content={seo.description} />
40+
<meta property="og:locale" content="en-gb" />
41+
<meta property="og:image" content={seo.image.toString()} />
42+
<meta property="og:image:alt" content="An image representing this post" />
43+
<meta property="og:image:width" content="600" />
44+
<meta property="og:image:width" content="600" />
45+
<meta property="og:image:type" content="image/jpeg" />
46+
{children}
47+
</>
48+
);
49+
};
50+
51+
export default Seo;

‎src/hooks/use-site-metadata.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const useSiteMetadata = () => {
88
title
99
description
1010
twitterHandle
11+
image
1112
siteUrl
1213
}
1314
}

‎src/templates/blog-page.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,33 @@ export const pageQuery = graphql`
3838
wordCount {
3939
words
4040
}
41+
excerpt(format: PLAIN, pruneLength: 30)
4142
frontmatter {
4243
permalink
4344
date(formatString: "MMMM DD, YYYY")
4445
title
4546
author
4647
tag
48+
featuredImage {
49+
childImageSharp {
50+
gatsbyImageData(
51+
placeholder: BLURRED
52+
height: 600
53+
formats: [AUTO, WEBP]
54+
width: 600
55+
quality: 80
56+
transformOptions: { grayscale: false, fit: COVER, cropFocus: CENTER }
57+
)
58+
}
59+
}
4760
}
4861
}
4962
}
5063
`;
5164

5265
export function Head({data: {markdownRemark}}) {
53-
const {frontmatter} = markdownRemark;
66+
const {frontmatter,excerpt} = markdownRemark;
5467
return (
55-
<Seo title={frontmatter.title} />
68+
<Seo title={frontmatter.title} description={excerpt} featured={frontmatter.featuredImage} />
5669
)
5770
}

‎src/templates/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,7 @@ export const pageQuery = graphql`
6363
`
6464

6565
export const Head = () => (
66-
<Seo title={"Blog and news"} description={"A sporadically populated blog; news, stories, tips"} />
66+
<Seo title={"Blog and news"}
67+
description={"A sporadically populated blog; news, stories, tips"}
68+
/>
6769
)

0 commit comments

Comments
 (0)