@davidlj95/ngx-meta
Version:
Set your Angular site's metadata: standard meta tags, Open Graph, Twitter Cards, JSON-LD structured data and more. Supports SSR (and Angular Universal). Use a service. Use routes' data. Set it up in a flash! 🚀
531 lines (527 loc) • 15.9 kB
TypeScript
// Generated by dts-bundle-generator v9.5.1
import * as i0 from '@angular/core';
import { Provider } from '@angular/core';
interface GlobalMetadataImage {
/**
* URL of the image. Used for:
*
* - {@link OpenGraphImage.url} (needs Open Graph module)
*
* - {@link TwitterCardImage.url} (needs Twitter Cards module)
*/
readonly url: string | URL;
/**
* A description of what is in the image (not a caption) to users who are
* visually impaired.
*
* Used for:
*
* - {@link OpenGraphImage.alt} (needs Open Graph module)
*
* - {@link TwitterCardImage.alt} (needs Twitter Cards module)
*/
readonly alt: string;
}
declare const ANGULAR_ROUTER_URL: unique symbol;
type AngularRouterUrl = typeof ANGULAR_ROUTER_URL;
interface GlobalMetadata {
/**
* Sets title for:
*
* - {@link Standard.title} (needs standard module)
*
* - {@link OpenGraph.title} (needs Open Graph module)
*
* - {@link TwitterCard.title} (needs Twitter Cards module)
*
* Title will be formatted for all of them when
* {@link https://ngx-meta.dev/guides/title-formatting | title formatting} is set up.
*/
readonly title?: string;
/**
* Sets description for:
*
* - {@link Standard.description} (needs standard module)
*
* - {@link OpenGraph.description} (needs Open Graph module)
*
* - {@link TwitterCard.description} (needs Twitter Cards module)
*/
readonly description?: string | null;
/**
* Sets application name for:
*
* - {@link Standard.applicationName} (needs standard module)
*
* - {@link OpenGraph.siteName} (needs Open Graph module)
*/
readonly applicationName?: string | null;
/**
* Sets canonical URL for:
*
* - {@link Standard.canonicalUrl} (needs standard module)
*
* - {@link OpenGraph.url} (needs Open Graph module)
*
* If {@link https://ngx-meta.dev/guides/url-resolution/ | URL resolution} feature is enabled, you may use
* a relative URL here. It will be resolved and the absolute URL will be used instead.
*
* You can also use the special value {@link ANGULAR_ROUTER_URL} to use the current Angular router's URL
* as the relative URL to be resolved into an absolute one.
*/
readonly canonicalUrl?: URL | AngularRouterUrl | string | null;
/**
* Sets localization of this page.
*
* Value must be a valid language tag complying with BCP 47.
* For instance: "`es`" or "`es-ES`"
*
* For:
*
* - {@link Standard.locale} (needs standard module)
*
* - {@link OpenGraph.locale} (needs Open Graph module)
*
* @remarks
*
* See also:
*
* - {@link https://datatracker.ietf.org/doc/html/rfc5646 | RFC 5646 / BCP 47}
*/
readonly locale?: string | null;
/**
* {@inheritDoc GlobalMetadataImage}
*/
readonly image?: GlobalMetadataImage | null;
}
/**
* Manages the {@link Standard.applicationName} metadata
* @public
*/
export declare const provideStandardApplicationName: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardApplicationName}
* @deprecated Use {@link provideStandardApplicationName} instead
* @public
*/
export declare const STANDARD_APPLICATION_NAME_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.author} metadata
* @public
*/
export declare const provideStandardAuthor: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardAuthor}
* @deprecated Use {@link provideStandardAuthor} instead
* @public
*/
export declare const STANDARD_AUTHOR_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.canonicalUrl} metadata
* @public
*/
export declare const provideStandardCanonicalUrl: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardCanonicalUrl}
* @deprecated Use {@link provideStandardCanonicalUrl} instead
* @public
*/
export declare const STANDARD_CANONICAL_URL_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.description} metadata
* @public
*/
export declare const provideStandardDescription: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardDescription}
* @deprecated Use {@link provideStandardDescription} instead
* @public
*/
export declare const STANDARD_DESCRIPTION_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.generator} metadata
* @public
*/
export declare const provideStandardGenerator: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardGenerator}
* @deprecated Use {@link provideStandardGenerator} instead
* @public
*/
export declare const STANDARD_GENERATOR_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.keywords} metadata
* @public
*/
export declare const provideStandardKeywords: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardKeywords}
* @deprecated Use {@link provideStandardKeywords} instead
* @public
*/
export declare const STANDARD_KEYWORDS_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.locale} metadata
* @public
*/
export declare const provideStandardLocale: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardLocale}
* @deprecated Use {@link provideStandardLocale} instead
* @public
*/
export declare const STANDARD_LOCALE_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Manages the {@link Standard.themeColor} metadata
* @public
*/
export declare const provideStandardThemeColor: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardThemeColor}
* @deprecated Use {@link provideStandardThemeColor} instead
* @public
*/
export declare const STANDARD_THEME_COLOR_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* See {@link Standard.themeColor}
* @public
*/
export type StandardThemeColorMetadata = string | readonly StandardThemeColorMetadataObject[];
/**
* See {@link Standard.themeColor}
* @public
*/
export interface StandardThemeColorMetadataObject {
/**
* See {@link Standard.themeColor}
*/
color: string;
/**
* See {@link Standard.themeColor}
*/
media?: string;
}
/**
* Manages the {@link Standard.title} metadata
* @public
*/
export declare const provideStandardTitle: () => import("@angular/core").Provider;
/**
* {@inheritDoc provideStandardTitle}
* @deprecated Use {@link provideStandardTitle} instead
* @public
*/
export declare const STANDARD_TITLE_METADATA_PROVIDER: import("@angular/core").Provider;
/**
* Provides {@link https://ngx-meta.dev/built-in-modules/standard/ | standard module}
* metadata managers.
*
* Check out {@link provideNgxMetaStandard} for the standalone, recommended API.
*
* @public
*/
export declare class NgxMetaStandardModule {
static ɵfac: i0.ɵɵFactoryDeclaration<NgxMetaStandardModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<NgxMetaStandardModule, never, never, never>;
static ɵinj: i0.ɵɵInjectorDeclaration<NgxMetaStandardModule>;
}
/**
* Provides {@link https://ngx-meta.dev/built-in-modules/standard/ | standard module}
* metadata managers.
*
* @remarks
*
* This is the standalone, recommended API. Using this API is preferred.
* However, you may also use {@link NgxMetaStandardModule} as the Angular module-based equivalent API.
*
* @public
*/
export declare const provideNgxMetaStandard: () => Provider;
/**
* {@link https://ngx-meta.dev/built-in-modules/standard/ | Standard module}
* metadata values that can be set.
*
* @public
*/
export interface Standard {
/**
* Sets the `<title>` HTML element.
*
* Can be set with {@link GlobalMetadata.title}.
*
* Title will be formatted if {@link https://ngx-meta.dev/guides/title-formatting | title formatting} is set up.
*
* @remarks
*
* Very relevant for SEO purposes.
*
* Recommendations:
*
* - Should be unique
*
* - Up to 50 ~ 60 characters
*
* - Prefer a dash "-" as separator
*
* Provider:
*
* {@link provideStandardTitle}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#the-title-element | HTML specs}
*
* - {@link https://moz.com/learn/seo/title-tag | Moz.com article about titles & SEO. Includes title preview on Google }
*
* - {@link https://yoast.com/page-titles-seo/ | Yoast article about titles & SEO}
*/
readonly title?: GlobalMetadata["title"];
/**
* Sets the `<meta name='description'>` HTML element.
*
* Can be set with {@link GlobalMetadata.description}.
*
* @remarks
*
* Very relevant for SEO purposes.
*
* Recommendations:
*
* - Up to 155 characters.
*
* Provider:
*
* {@link provideStandardDescription}
*
* See also:
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-description | MDN docs}
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=description | HTML specs}
*
* - {@link https://yoast.com/meta-descriptions/ | Yoast article about meta descriptions}
*/
readonly description?: GlobalMetadata["description"];
/**
* Sets the `<meta name='author'>` HTML element.
*
* @remarks
*
* Doesn't seem to provide many benefits in terms of SEO.
* Check out linked Moz.com article.
*
* Provider:
*
* {@link provideStandardAuthor}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=author | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-author | HTML specs}
*
* - {@link https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags | Moz.com article about meta tags}
*/
readonly author?: string | null;
/**
* Sets the `<meta name='keywords'>` HTML element.
*
* @remarks
*
* Doesn't seem to provide many benefits in terms of SEO. It's ignored by Google.
* Check out linked articles for more information.
*
* Provider:
*
* {@link provideStandardKeywords}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=keywords | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-keywords | HTML specs}
*
* - {@link https://yoast.com/meta-keywords/ | Yoast article about meta keywords}
*
* - {@link https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags | Moz.com article about meta tags}
*
* - {@link https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag | Google doesn't use meta keywords}
*/
readonly keywords?: readonly string[] | null;
/**
* Sets the `<meta name='generator'>` HTML tag.
*
* Includes the Angular version used to generate the page.
*
* @remarks
*
* Doesn't provide any benefits in terms of SEO.
* Check out linked Moz.com article.
*
* Provider:
*
* {@link provideStandardGenerator}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=generator | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-generator | HTML specs}
*
* - {@link https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags | Moz.com article about meta tags}
*/
readonly generator?: true | null;
/**
* Sets the `<meta name='application-name'>` HTML element.
*
* Can be set with {@link GlobalMetadata.applicationName}.
*
* @remarks
*
* Not SEO related.
*
* Recommendations:
*
* - From MDN: simple web pages shouldn't define an application name.
*
* - From HTML specs: if the page is not a web application, the
* `application-name` metadata name must not be used.
*
* Provider:
*
* {@link provideStandardApplicationName}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#:~:text=application%2Dname | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-application-name | HTML specs}
*/
readonly applicationName?: GlobalMetadata["applicationName"];
/**
* Sets the `<link rel='canonical'>` HTML element.
*
* Can be set with {@link GlobalMetadata.canonicalUrl}.
*
* If {@link https://ngx-meta.dev/guides/url-resolution/ | URL resolution}
* feature is enabled and a relative URL is provided, an absolute one will
* be used as value after resolving it.
*
* @remarks
*
* Very relevant for SEO purposes.
*
* Recommendations:
*
* - An absolute URL is preferred. Despite a relative URL is valid too.
* Checkout the linked StackOverflow answer below for more details.
*
* Provider:
*
* {@link provideStandardCanonicalUrl}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#canonical | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/links.html#link-type-canonical | HTML specs}
*
* - {@link https://support.google.com/webmasters/answer/10347851?hl=en | Google article about canonical URLs}
*
* - {@link https://stackoverflow.com/a/8467966/3263250 | Why absolute URLs are preferred (StackOverflow answer) }
*
* - {@link https://yoast.com/rel-canonical/ | Yoast article about canonical URLs}
*/
readonly canonicalUrl?: GlobalMetadata["canonicalUrl"];
/**
* Sets the `lang` attribute to the `<html>` element.
*
* Can be set with {@link GlobalMetadata.locale}.
*
* Value must be a valid language tag complying with BCP 47
* For instance: "es" or "es-ES".
*
* @remarks
*
* Doesn't seem to provide any benefit in terms of SEO.
*
* Provider:
*
* {@link provideStandardLocale}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/dom.html#attr-lang | HTML specs}
*
* - {@link https://datatracker.ietf.org/doc/html/rfc5646 | RFC5646 / BCP47 }
*
* - {@link https://support.google.com/webmasters/thread/86451607?hl=en&msgid=86452356 | `lang` attribute & SEO post on Google's search console help}
*/
readonly locale?: GlobalMetadata["locale"];
/**
* Sets one or more `<meta name='theme-color'>` HTML elements.
*
* @remarks
*
* If set, color(s) must specify a valid CSS color.
*
* A `media` attribute can be set to specify a different color depending on
* the context based on a CSS media query. For instance, to provide one color
* for dark mode and another for light mode.
*
* You can use a `string` value to set one theme color as value. No `media`
* attribute will be used then.
*
* You can also specify one or more colors and media queries combinations by
* providing an array of {@link StandardThemeColorMetadataObject} specifying
* the color and (optionally) a media query.
*
* Not related to SEO.
*
* Provider:
*
* {@link provideStandardThemeColor}
*
* See also:
*
* - {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color | MDN docs}
*
* - {@link https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color | HTML specs}
*
* @example
*
* Providing just one theme color:
*
* ```typescript
* const themeColor: Standard['themeColor'] = 'lightblue'
* ```
*
* Providing multiple theme colors based on a media query:
*
* ```typescript
* const themeColor: StandardThemeColorMetadata = [
* {color: 'darkblue', media: '(prefers-color-scheme: dark)'}
* {color: 'lightblue'}, // Default (when user does not prefer dark)
* ]
* ```
*/
readonly themeColor?: StandardThemeColorMetadata | null;
}
/**
* Utility type to provide specific
* {@link https://ngx-meta.dev/built-in-modules/standard/ | standard module}
* metadata.
*
* @public
*/
export interface StandardMetadata {
/**
* {@inheritDoc Standard}
*/
standard: Standard;
}
export {};