gatsby-plugin-next-seo
Version:
SEO plugin for Gatsby projects
213 lines • 6.55 kB
TypeScript
import { FC } from 'react';
import { Article, BlogPosting, NewsArticle } from 'schema-dts';
import { Except } from 'type-fest';
import { DeferSeoProps } from '../types';
import { Overrides, Speakable } from '../utils/shared-types';
/**
* The component props for a JSON LD Article.
*
* @public
*/
export interface ArticleJsonLdProps extends DeferSeoProps, Overrides<Article> {
/**
* The canonical URL of the article page.
*/
url: string;
/**
* The headline of the article.
*
* @remarks
*
* Headlines should not exceed 110 characters. For AMP stories, the headline
* should match the text in the first cover page in the AMP Story.
*/
headline?: string | string[];
/**
* @deprecated
*
* Use headline instead.
*/
title?: string;
/**
* Keywords or tags used to describe this content.
*
* @remarks
*
* Multiple entries in a keywords list are typically delimited by commas.
*/
keywords?: string | string[];
/**
* The images URLs that is representative of the article or AMP story.
*
* @remarks
*
* Due to format differences in search results, the following image guidelines
* only apply to general AMP pages, not AMP stories. AMP stories have
* {@link https://www.ampproject.org/docs/reference/components/amp-story#new-metadata-requirements | different requirements}
* for images.
*
* - Only a marked-up image that directly belongs to the article should be
* specified.
* - Images should be at least 1200 pixels wide.
* - Every page must contain at least one image (whether or not you include
* markup). Google will pick the best image to display in Search results
* based on the aspect ratio and resolution.
* - Image URLs must be crawlable and indexable.
* - Images must represent the marked up content. Images must be in .jpg,
* .png, or .gif format.
* - For best results, provide multiple high-resolution images (minimum of
* 800,000 pixels when multiplying width and height) with the following
* aspect ratios: 16x9, 4x3, and 1x1.
*/
images: string[];
/**
* The date and time the article was first published, in ISO 8601 format.
*
* @remarks
*
* Best practices:
*
* - The date shouldn't change over time.
* - We recommend including the hour information in addition to the day in the
* timestamp.
* - The value for dateModified should be more recent than the value for
* datePublished.
*/
datePublished: string;
/**
* The date on which the CreativeWork was created or the item was added to a
* DataFeed.
*/
dateCreated?: string;
/**
* The date and time the article was most recently modified, in ISO 8601
* format.
*/
dateModified?: string;
/**
* The name of the author.
*/
authorName: string;
/**
* The type of author for this article.
*
* @defaultValue 'Person'
*/
authorType?: 'Person' | 'Organization';
/**
* A short description of the article.
*/
description: string;
/**
* The name of the publisher.
*/
publisherName: string;
/**
* The url of the publisher logo.
*/
publisherLogo: string;
/**
* The actual body of the article.
*/
body?: string;
/**
* Provide
*/
speakable?: Speakable[];
}
/**
* An article, such as a news article or piece of investigative report.
* Newspapers and magazines have articles of many different types and this is
* intended to cover them all.
*
* See also
* {@link http://blog.schema.org/2014/09/schemaorg-support-for-bibliographic_2.html | blog post}.
*/
export declare const ArticleJsonLd: FC<ArticleJsonLdProps>;
export interface BlogPostJsonLdProps extends Except<ArticleJsonLdProps, 'publisherName' | 'publisherLogo' | 'overrides'>, Overrides<BlogPosting> {
/**
* The name of the publisher.
*/
publisherName?: string;
/**
* The url of the publisher logo.
*/
publisherLogo?: string;
}
/**
* A utility component which wraps the `<ArticleJsonLd />` component but is
* classified as a `BlogPosting`.
*
* @remarks
*
* ```jsx
* import React from 'react';
* import { BlogPostJsonLd } from 'gatsby-plugin-next-seo';
*
* export default () => (
* <>
* <h1>Blog Post JSON-LD</h1>
* <BlogPostJsonLd
* url='https://example.com/blog'
* title='Blog headline'
* images={[
* 'https://example.com/photos/1x1/photo.jpg',
* 'https://example.com/photos/4x3/photo.jpg',
* 'https://example.com/photos/16x9/photo.jpg',
* ]}
* datePublished='2015-02-05T08:00:00+08:00'
* dateModified='2015-02-05T09:00:00+08:00'
* authorName='Jane Blogs'
* description='This is a mighty good description of this blog.'
* />
* </>
* );
* ```
*
* @public
*/
export declare const BlogPostJsonLd: FC<BlogPostJsonLdProps>;
export interface NewsArticleJsonLdProps extends Except<ArticleJsonLdProps, 'overrides'>, Overrides<NewsArticle> {
/**
* Articles may belong to one or more 'sections' in a magazine or newspaper,
* such as Sports, Lifestyle, etc.
*/
section?: string | string[];
}
/**
* A utility component which wraps the `<ArticleJsonLd />` component but is
* classified as a `NewsArticle`.
*
* @remarks
*
* ```tsx
* import React from 'react';
* import { NewsArticleJsonLd } from 'gatsby-plugin-next-seo';
*
* export default () => (
* <>
* <h1>News Article JSON-LD</h1>
* <NewsArticleJsonLd
* url='https://example.com/article'
* title='Article headline'
* images={[
* 'https://example.com/photos/1x1/photo.jpg',
* 'https://example.com/photos/4x3/photo.jpg',
* 'https://example.com/photos/16x9/photo.jpg',
* ]}
* section='politic'
* keywords='prayuth,taksin'
* datePublished='2015-02-05T08:00:00+08:00'
* dateModified='2015-02-05T09:00:00+08:00'
* authorName='Jane Blogs'
* publisherName='Ifiok Jr.'
* publisherLogo='https://www.example.com/photos/logo.jpg'
* description='This is a mighty good description of this article.'
* body='This is all text for this news article'
* />
* </>
* );
* ```
*/
export declare const NewsArticleJsonLd: FC<NewsArticleJsonLdProps>;
//# sourceMappingURL=article.d.ts.map