Skip to content

Commit

Permalink
Fix: fixies
Browse files Browse the repository at this point in the history
  • Loading branch information
@luciobenini
luciobenini committed May 28, 2022
1 parent 0727f17 commit fee834b
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 58 deletions.
18 changes: 9 additions & 9 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@pittica/gatsby-plugin-seo",
"private": false,
"description": "SEO optimization plugin for GatsbyJS.",
"version": "4.3.2",
"version": "4.3.3",
"author": {
"name": "Lucio Benini",
"email": "[email protected]",
Expand All @@ -20,7 +20,7 @@
"social-networks"
],
"dependencies": {
"@pittica/gatsby-plugin-utils": "^2.3.0",
"@pittica/gatsby-plugin-utils": "^2.4.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
Expand Down
37 changes: 32 additions & 5 deletions src/components/open-graph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { formatLocale, joinLocale, withUrl } from "@pittica/gatsby-plugin-utils"
import SocialContext from "../context/social-context"

export default function OpenGraph({
url,
title,
article,
description,
image,
locale,
site,
}) {
const {
socials: {
Expand All @@ -21,29 +23,54 @@ export default function OpenGraph({

return (
<Helmet>
{article && <meta property="og:type" content="article" />}
{title && <meta property="og:title" content={title} />}
{article && <meta property="og:type" content="article" key="og-type" />}
{url && (
<meta property="og:url" content={withUrl(url, siteUrl)} key="og-url" />
)}
{title && <meta property="og:title" content={title} key="og-title" />}
{locale && (
<meta property="og:locale" content={joinLocale(formatLocale(locale))} />
<meta
property="og:locale"
content={joinLocale(formatLocale(locale))}
key="og-locale"
/>
)}
{description && (
<meta
property="og:description"
content={description}
key="og-description"
/>
)}
{image && (
<meta
property="og:image"
content={withUrl(image, siteUrl)}
key="og-image"
/>
)}
{site && (
<meta property="og:site_name" content={site} key="og-site-name" />
)}
{description && <meta property="og:description" content={description} />}
{image && <meta property="og:image" content={withUrl(image, siteUrl)} />}
{article && page ? (
<meta
property="article:publisher"
content={withUrl(page, "https://www.facebook.com/")}
key="article-publisher"
/>
) : null}
</Helmet>
)
}

OpenGraph.propTypes = {
url: PropTypes.string,
title: PropTypes.string,
article: PropTypes.bool,
image: PropTypes.string,
description: PropTypes.string,
locale: PropTypes.any,
site: PropTypes.string,
}

OpenGraph.defaultProps = {
Expand Down
34 changes: 28 additions & 6 deletions src/components/seo.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,40 @@ export default function Seo({
titleTemplate={title ? `%s | ${context.title}` : context.title}
>
{postDescription && (
<meta name="description" content={postDescription} />
<meta
name="description"
content={postDescription}
key="html-description"
/>
)}
{keywords && keywords.length > 0 && (
<meta name="keywords" content={keywords.join(", ")} />
<meta
name="keywords"
content={keywords.join(", ")}
key="html-keywords"
/>
)}
{image && (
<meta name="image" content={withUrl(image, context.siteUrl)} />
<meta
name="image"
content={withUrl(image, context.siteUrl)}
key="html-image"
/>
)}
<link rel="canonical" href={url} key="html-canonical" />
{next && (
<link
rel="next"
href={withUrl(next, context.siteUrl)}
key="html-next"
/>
)}
<link rel="canonical" href={url} />
{next && <link rel="next" href={withUrl(next, context.siteUrl)} />}
{previous && (
<link rel="prev" href={withUrl(previous, context.siteUrl)} />
<link
rel="prev"
href={withUrl(previous, context.siteUrl)}
key="html-previous"
/>
)}
</Helmet>
<OpenGraph
Expand Down
62 changes: 54 additions & 8 deletions src/components/twitter-card.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,60 @@
import React, { useContext } from "react"
import React, { Fragment, useContext } from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet-async"
import { withUrl } from "@pittica/gatsby-plugin-utils"
import { withUrl, tail } from "@pittica/gatsby-plugin-utils"

import SocialContext from "../context/social-context"

export default function TwitterCard({ title, description, image }) {
export default function TwitterCard({
title,
description,
image,
username,
site,
}) {
const { siteUrl } = useContext(SocialContext)

return (
<Helmet>
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{image && <meta name="twitter:image" content={withUrl(image, siteUrl)} />}
<meta
name="twitter:card"
content="summary_large_image"
key="twitter-card"
/>
{title && (
<meta
name="twitter:title"
content={tail(title, 70)}
key="twitter-title"
/>
)}
{description && (
<meta
name="twitter:description"
content={tail(description, 200)}
key="twitter-description"
/>
)}
{image && (
<Fragment>
<meta
name="twitter:image"
content={withUrl(image, siteUrl)}
key="twitter-image"
/>
{description && (
<meta
name="twitter:image:alt"
content={tail(description, 420)}
key="twitter-image-alternative"
/>
)}
</Fragment>
)}
{site && <meta name="twitter:site" content={site} key="twitter-site" />}
{username && (
<meta name="twitter:creator" content={username} key="twitter-creator" />
)}
</Helmet>
)
}
Expand All @@ -21,10 +63,14 @@ TwitterCard.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
image: PropTypes.string,
username: PropTypes.string,
site: PropTypes.string,
}

TwitterCard.defaultProps = {
title: null,
description: null,
title: "",
description: "",
image: null,
username: "",
site: "",
}
51 changes: 23 additions & 28 deletions src/gatsby-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { joinLocale, formatLocale, withUrl } from "@pittica/gatsby-plugin-utils"
import SocialContext from "./context/social-context"
import Organization from "./components/ld-json/organization"
import Website from "./components/ld-json/website"
import TwitterCard from "./components/twitter-card"
import OpenGraph from "./components/open-graph"

export function wrapPageElement(
{ element, props: { location } },
Expand All @@ -31,41 +33,34 @@ export function wrapPageElement(
lang: locale.language,
}}
>
{image && <meta name="image" content={image} />}
{facebook.app && <meta property="fb:app_id" content={facebook.app} />}
<meta
property="og:url"
content={location.href || withUrl(location.pathname, siteUrl)}
/>
{title && <meta property="og:title" content={title} />}
{title && <meta property="og:site_name" content={title} />}
{description && (
<meta property="og:description" content={description} />
)}
{locale && (
<meta
property="og:locale"
content={joinLocale(formatLocale(locale))}
/>
)}
{image && <meta property="og:image" content={image} />}
<meta name="twitter:card" content="summary_large_image" />
{title && <meta name="twitter:title" content={title} />}
{description && (
<meta name="twitter:description" content={description} />
)}
{(twitter.site || twitter.username) && (
<meta
name="twitter:site"
content={twitter.site || twitter.username}
name="description"
content={description}
key="html-description"
/>
)}
{twitter.username && (
<meta name="twitter:creator" content={twitter.username} />
{image && <meta name="image" content={image} key="html-image" />}
{facebook.app && (
<meta property="fb:app_id" content={facebook.app} key="fb-app-id" />
)}
{image && <meta name="twitter:image" content={image} />}
{!debug && <base href={siteUrl} />}
</Helmet>
<OpenGraph
url={location.href || withUrl(location.pathname, siteUrl)}
title={title}
description={description}
image={image}
locale={locale}
site={title}
/>
<TwitterCard
title={title}
description={description}
image={image}
username={twitter.username}
site={twitter.site || twitter.username}
/>
<Website url={siteUrl} description={description} name={title} />
<Organization organization={organization} socials={socials} />
{element}
Expand Down

0 comments on commit fee834b

Please sign in to comment.