@nymdev/clay-meta-site

twitter:site, og:site_name, and og:type tags

Usage no npm install needed!

<script type="module">
  import nymdevClayMetaSite from 'https://cdn.skypack.dev/@nymdev/clay-meta-site';
</script>

README

clay-meta-site

twitter:site, fb:app_id, og:site_name, and og:type tags!

Install

npm install --save @nymdev/clay-meta-site

Adds site-specific tags to the head:

  • twitter:site
  • og:site_name
  • og:type
  • apple-mobile-web-app-title (using site name)
  • format-detection (to kill telephone links on mobile browsers)
  • icon (square site icon)
  • mask-icon
  • icon sizes="196x196"
  • article:publisher (for facebook)
  • fb:app_id

Usage

Once you install it, it will be automatically recognized by amphora. It has the following properties:

  • twitter should be a twitter handle (without an @-sign)
  • facebook should be your site's facebook name
  • facebookID should be a facebook app id
  • siteName should be a human-readable site name, which will appear in Google search results and Facebook posts
  • ogType should identify the type of page for sharing, per the Open Graph protocol
  • detectTel is "yes" or "no" to detect telephone links in mobile browsers
  • icon, maskIcon, and 196pxIcon should be links to your icons
  • maskColor should be a hex color value, e.g. #FF5656

A Note On Head Components

This component lives in the head of the page, and isn't editable directly. Use the componentRef behavior to affect it when you edit other components on the page.