serp-preview
v0.2.0
Published
Show how your website will appear in searchs engine results
Downloads
7
Maintainers
Readme
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
import { GooglePreview, BingPreview, YahooPreview, GoogleMobilePreview } from "serp-preview";
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 |