1.0.1 • Published 2 years ago
grab-page-info v1.0.1
grab-page-info
Grabs Open Graph and Twitter Card metadata out of an HTML page
Installation
Use npm
(or yarn
, or pnpm
) to add grab-page-info to your project:
npm install grab-page-info
grab-page-info contains CommonJS and ESM modules for use in Node, in the browser and at the edge.
Usage
import { grabPageInfo } from 'grab-page-info';
const html = '<html></html>';
const info = grabPageInfo(html);
Types
PageInfo
The info returned from the grabPageInfo method has the following properties:
Property | Type | Description |
---|---|---|
title | string | The text inside the page's <title> tag |
charset | string | The character set from the page's <meta charset> tag, which gives the character encoding of the page's document |
links | LinkData[] | The details of any <link> tags in the page, including links for stylesheets, RSS feeds, icons, and so on |
metaApplicationName | string | The name of the application running in the web page |
metaDescription | string | A summary of the content of the page |
metaAuthor | string | The name of the document's author |
metaCreator | string | The name of the creator of the document, such as an organization or institution |
metaPublisher | string | The name of the document's publisher |
metaCopyright | string | A copyright declaration for the content of the page |
metaKeywords | string | Words relevant to the page's content separated by commas |
metaRating | string | Indicates the appropriate age level for accessing the content of the page |
metaGenerator | string | The identifier of the software that generated the page |
metaReferrer | string | Controls the HTTP Referer header of requests sent from the document |
metaThemeColor | string | A suggested color that user agents should use to customize the display of the page or of the surrounding user interface |
metaColorScheme | string | One or more color schemes with which the document is compatible |
metaRobots | string | The behavior that cooperative crawlers, or "robots", should use with the page |
metaGooglebot | string | A synonym of robots which is only followed by the indexing crawler for Google |
metaViewport | string | Gives hints about the size of the initial size of the viewport |
openTitle | string | The title of the page as it should appear within the graph, e.g., "The Rock" |
openType | string | The type of the page, e.g., "video.movie". Depending on the type specified, other properties will also be set |
openUrl | string | The canonical URL of the page that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/" |
openImages | OpenImageData[] | Images which should represent the page within the graph |
openDescription | string | A one to two sentence description of the page |
openDeterminer | string | The word that appears before the page's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank) |
openLocale | string | The locale the page is marked up in. Of the format language_TERRITORY. Default is en_US |
openAlternateLocales | string[] | An array of other locales the page is available in |
openSiteName | string | If the page is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb" |
openVideos | OpenVideoData[] | Video files that complement the page |
openAudio | OpenAudioData | An audio file to accompany the page |
twitterCard | string | The card type |
twitterSite | string | The Twitter username of the website. Either twitter:site or twitter:site:id is required |
twitterSiteId | string | The Twitter ID of the website. Either twitter:site or twitter:site:id is required |
twitterCreator | string | The Twitter username of the content creator |
twitterCreatorId | string | The Twitter user ID of the content creator |
twitterTitle | string | The title of the content (max 70 characters) |
twitterDescription | string | A description of the content (maximum 200 characters) |
twitterImage | TwitterImageData | An image to use in the card. JPG, PNG, WEBP and GIF formats are supported |
twitterPlayer | TwitterPlayerData | A player iframe to use in the card |
twitterApp | TwitterAppData | Details of the App to show in the card |
LinkData
The details of a <link>
tag, such as a link to a stylesheet, RSS feed, icon, and so on.
Property | Type | Description |
---|---|---|
href | string | The URL of the linked resource. A URL can be absolute or relative |
rel | string | The relationship of the linked document to the current document. Its value must be a space-separated list of link type values |
title | string | The title of the linked resource |
type | string | The type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on |
sizes | string | The sizes of the icons contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple's apple-touch-icon |
media | string | Specifies the media that the linked resource applies to. Its value must be a media type/media query |
OpenImageData
An image which should represent a page within the graph.
Property | Type | Description |
---|---|---|
url | string | An image URL which should represent the page within the graph |
secureUrl | string | An alternate url to use if the webpage requires HTTPS |
type | string | A MIME type for this image |
width | string | The number of pixels wide |
height | string | The number of pixels high |
alt | string | A description of what is in the image (not a caption). If the page specifies an image it should specify alt text |
OpenVideoData
A video file that complements a page.
Property | Type | Description |
---|---|---|
url | string | A video URL which should accompany the page within the graph |
secureUrl | string | An alternate url to use if the webpage requires HTTPS |
type | string | A MIME type for this video |
width | string | The number of pixels wide |
height | string | The number of pixels high |
OpenAudioData
An audio file to accompany a page.
Property | Type | Description |
---|---|---|
url | string | An audio URL which should accompany the page within the graph |
secureUrl | string | An alternate url to use if the webpage requires HTTPS |
type | string | A MIME type for this audio |
TwitterImageData
An image to use in in a Twitter card.
Property | Type | Description |
---|---|---|
url | string | The URL of the image to use in the card. JPG, PNG, WEBP and GIF formats are supported |
alt | string | A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters |
TwitterPlayerData
A player iframe to use in a Twitter card.
Property | Type | Description |
---|---|---|
url | string | The HTTPS URL of the player iframe |
width | string | The width of the iframe in pixels |
height | string | The height of the iframe in pixels |
stream | string | A URL to a raw video or audio stream |
TwitterAppData
Details of the App to show in a Twitter card.
Property | Type | Description |
---|---|---|
country | string | The country the app is from |
iPhoneName | string | The name of the iPhone app |
iPhoneId | string | The iPhone app ID in the iTunes App Store |
iPhoneUrl | string | The iPhone app's custom URL scheme (which must include '://' after the scheme name) |
iPadName | string | The name of the iPad optimized app |
iPadId | string | The iPad app ID in the iTunes App Store |
iPadUrl | string | The iPad app's custom URL scheme |
androidName | string | The name of the Android app |
androidId | string | The Android app ID in the Google Play Store |
androidUrl | string | The Android app's custom URL scheme |
1.0.1
2 years ago