serp-preview
React component for show how your website will appear in searchs engine results
Highlights
- Multiple search engines
- Use styled-components
- Clean and tested
Installation
Using npm:
$ npm i serp-preview
Usage
; const Example = <div> <GooglePreview title="🥇React – A JavaScript library for building user interfaces" description="React makes it painless to create interactive UIs." url="https://reactjs.org" link="https://reactjs.org" /> <BingPreview title="A declarative, efficient, and flexible ... - Wikipedia" description="" url="en.wikipedia.org › wiki › React" link="https://en.wikipedia.org/wiki/React" /> <YahooPreview title="React Native · A framework for building native apps using React" description="A framework for building native apps using React." url="https://reactnative.dev" link="https://reactnative.dev" /> <GoogleMobilePreview title="🥇React – A JavaScript library for building user interfaces" description="React makes it painless to create interactive UIs." url="https://reactjs.org" link="https://reactjs.org" /> </div>
API
Property | Prop Type | Required | Default | Description |
---|---|---|---|---|
title | string | yes | - | Title |
description | string / node / [nodes] | - | null | Metadescription |
url | string | yes | - | Url |
link | string | - | # | Link |