Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cometkim/gatsby-plugin-head-seo
A Gatsby Plugin to support SEO, built-on top of the Gatsby Head API. No react-helmet required.
https://github.com/cometkim/gatsby-plugin-head-seo
gatsby gatsby-plugin seo
Last synced: about 2 months ago
JSON representation
A Gatsby Plugin to support SEO, built-on top of the Gatsby Head API. No react-helmet required.
- Host: GitHub
- URL: https://github.com/cometkim/gatsby-plugin-head-seo
- Owner: cometkim
- License: mit
- Created: 2022-09-19T10:33:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T19:51:37.000Z (8 months ago)
- Last Synced: 2024-05-01T15:33:41.518Z (8 months ago)
- Topics: gatsby, gatsby-plugin, seo
- Language: TypeScript
- Homepage: https://www.gatsbyjs.com/plugins/gatsby-plugin-head-seo
- Size: 3.7 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-plugin-head-seo
[](https://www.npmjs.com/package/gatsby-plugin-head-seo)
[](https://www.npmjs.com/package/gatsby-plugin-head-seo)
[](#LICENSE)
A Gatsby plugin to support SEO, built-on top of the [Gatsby Head API]. No react-helmet required.
## Requirements
It is intended to be used with the [Gatsby Head API].
Support for the [Gatsby Head API] was added in `[email protected]`.
## Usage
### Basic Metadata
```ts
// gatsby-config.ts
import { type GatsbyConfig } from 'gatsby';
const config: GatsbyConfig = {
siteMetadata: {
siteUrl: 'https://my-hoempage.com',
title: 'My Homepage',
description: 'This is my hoempage',
},
plugins: [
'gatsby-plugin-head-seo',
],
};
```
The `` use siteMetadata you defines in gatsby-config.
It automatically builds basic meta tags for title, description, and canonical url for the page.
```tsx
// in the page
import { type HeadProps } from 'gatsby';
import { HeadSeo } from 'gasby-plugin-head-seo/src';
export function Head({ location }: HeadProps) {
return (
);
}
```
You can overrides the passing properties.
```tsx
// in the page
import { type HeadProps } from 'gatsby';
import { HeadSeo } from 'gasby-plugin-head-seo/src';
export function Head({ location }: HeadProps) {
return (
);
}
```
### Social Media
There are utility components for [Open Graph](https://ogp.me/) and [Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards).
Twitter Card indirectly reference the Open Graph standard, so I recommend always using them together.
```tsx
// in the page
import { type HeadProps } from 'gatsby';
import { HeadSeo, OpenGraph, TwitterCard, Facebook } from 'gasby-plugin-head-seo/src';
export function Head({ location }: HeadProps) {
return (
{({ url, title, description }) => (
<>
>
)}
);
}
```
### Robots Directives
There are utilities for [robots meta tags](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag).
```tsx
// in the page
import { type HeadProps } from 'gatsby';
import { HeadSeo, Robots } from 'gasby-plugin-head-seo/src';
export function Head({ location }: HeadProps) {
return (
);
}
```
### JSON-LD
There are utilities for JSON-LD markup. It refers to the [schema.org](https://schema.org/) standard, and some extensions for [Google Search's rich content schema](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data).
```tsx
import {
// schema.org standard schema
ArticleJsonLd,
BlogJsonLd,
BlogPostJsonLd,
BookJsonLd,
BreadcrumbListJsonLd,
CourseJsonLd,
FAQPageJsonLd,
JobPostingJsonLd,
LocalBusinessJsonLd,
ProductJsonLd,
WebSiteJsonLd, // Supports Google's Sitelinks Search Box extension
// extensions
SocialProfileJsonLd, // Person or Organization
} from 'gasby-plugin-head-seo/src/jsonld';
```
See [code](src/jsonld) for more detail.
### Composition of Multiple ``
```tsx
{({ title: siteTitle }) => (
{({ title: categoryTitle }) => (
{`Content | ${categoryTitle}`}
// So the result will be `Content | Category | Site`
)}
)}
```
FYI, this plugin uses [gatsby-plugin-dedupe-head](https://github.com/cometkim/gatsby-plugin-dedupe-head) for deduplication of tags.
## Acknowledgement
This plugin was inspired by [https://github.com/ifiokjr/gatsby-plugin-next-seo](https://github.com/ifiokjr/gatsby-plugin-next-seo), which was originally forked from [next-seo](https://github.com/garmeeh/next-seo)
## LICENSE
MIT
[Gatsby Head API]: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/