grab-page-info
v1.0.2
Published
Grabs Open Graph and Twitter Card metadata out of an HTML page
Readme
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-infograb-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 |