@vanillawc/wc-social-card v1.0.6

A Vanilla Web Component that makes it easy to tag website content with a social card link

A social card is the popup you sometimes see when you hover over a link. Tagging web content with social cards has been proven to dramatically increase click-thru traffic to content. The standard used to define social cards is called OpenGraph. For more info on the standard, check out the OpenGraphProtocol website. To test your link go to OpenGraphcheck.com.

Installation

npm i @vanillawc/wc-social-card

Then import the index.js file at the root of the package.

Usage

Attributes

• title - the title that displays on the card
• type - the content type ()
• image - an image to give context to the link (ideally 1200pxx675px - 600pxx335px || 16:9 ratio)
• url - the href to the content

Load an external Markdown file using the src attribute

<wc-social-card title="The Title" type="website" url="http://example.com" image="http://example.com/images/image.jpg"></wc-social-card>

Demo: WC-Social-Card - Basic Usage

Demo

In addition to the links above each of the demos can be run locally with.

npm run start