React Native Open Graph Scraper

forked from https://github.com/jshemas/openGraphScraper


A simple node module(with TypeScript declarations) for scraping Open Graph and Twitter Card info off a site.

Installation

``bash
yarn install react-native-open-graph-scraper
`

Usage

`javascript
const ogs = require("react-native-open-graph-scraper");
const options = { url: "http://ogp.me/" };
ogs(options).then((data) => {
const { error, html, result, response } = data;
console.log("error:", error); // This returns true or false. True if there was an error. The error itself is inside the result object.
console.log("html:", html); // This contains the HTML of page
console.log("result:", result); // This contains all of the Open Graph results
console.log("response:", response); // This contains response from the Fetch API
});
`

Results JSON

Check the return for a success flag. If success is set to true, then the url input was valid. Otherwise it will be set to false. The above example will return something like...

`javascript
{
ogTitle: 'Open Graph protocol',
ogType: 'website',
ogUrl: 'https://ogp.me/',
ogDescription: 'The Open Graph protocol enables any web page to become a rich object in a social graph.',
ogImage: [
{
height: '300',
type: 'image/png',
url: 'https://ogp.me/logo.png',
width: '300'
}
],
charset: 'utf-8',
requestUrl: 'http://ogp.me/',
success: true
}
`

Options

| Name | Info | Default Value | Required |
| -------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------- |
| url | URL of the site. | | x |
| html | You can pass in an HTML string to run ogs on it. (use without options.url) | | |
| fetchOptions | Options that are used by the Fetch API | {} | |
| timeout | Request timeout for Fetch (Default is 10 seconds) | 10 | |
| blacklist | Pass in an array of sites you don't want ogs to run on. | [] | |
| onlyGetOpenGraphInfo | Only fetch open graph info and don't fall back on anything else. | false | |
| customMetaTags | Here you can define custom meta tags you want to scrape. | [] | |
| urlValidatorSettings | Sets the options used by validator.js for testing the URL | Here | |

Note: open-graph-scraper uses the Fetch API for requests and most of Fetch's options should work as open-graph-scraper's fetchOptions options.

Custom Meta Tag Example

`javascript
const ogs = require("react-native-open-graph-scraper");
const options = {
url: "https://github.com/rkstar/open-graph-scraper",
customMetaTags: [
{
multiple: false, // is there more than one of these tags on a page (normally this is false)
property: "hostname", // meta tag name/property attribute
fieldName: "hostnameMetaTag", // name of the result variable
},
],
};
ogs(options).then((data) => {
const { result } = data;
console.log("hostnameMetaTag:", result.customMetaTags.hostnameMetaTag); // hostnameMetaTag: github.com
});
`

HTML Example

`javascript
const ogs = require("react-native-open-graph-scraper");
const options = {
html:






,
};
ogs(options).then((data) => {
const { result } = data;
console.log("result:", result);
// result: {
// ogDescription: 'html description example',
// ogTitle: 'foobar',
// ogType: 'website',
// ogImage: [ { url: 'https://www.foo.com/bar.jpg', type: 'jpg' } ],
// favicon: 'https://bar.com/foo.png',
// charset: 'utf-8',
// success: true
// }
});
``