This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/client/components/SEOTricks.svelte

59 lines
1.9 KiB

<script>
import config from "$/client/config.js";
export let og = {
"title": "", // title of the article
"description": "", // description for inside preview
"image": "", // image to display, 5mb/1200/627 max
"url": config.og_base_host, // URL to article
"type": "website", // not mentioned on linked in but needed
}
// taken from https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
// also refer to https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
export let twitter = {
"card": "summary", // must be summary or player
"creator": config.twitter_user, // @username of content creator
"description": og.description, // max 200 chars
"image": "", // max 5mb image url 1:1 ratio
"image:alt": "", // max 420 chars image alt
"site": config.twitter_user, // @username of site
"title": og.title, // max 70 chars title
"player": "", // https url of player iframe
"player:width": "", // width iframe in pixels
"player:height": "", // height iframe in pixels
"player:stream": "", // URL to raw video/audio stream
}
export let language = "en";
export let json_ld = {
"@context": "http://schema.org",
"@type": "WebSite",
"name": og.title,
"url": og.url,
"sameAs": [`https://twitter.com/${twitter.site}`],
}
</script>
<svelte:head>
<meta name="description" content={ og.description }>
<!-- JSON-LD spec -->
<script type="application/ld+json">
{ JSON.stringify(json_ld) }
</script>
<!--OG Spec for LinkedIn/Facebook/Others -->
{#each Object.keys(og) as key}
<meta property="og:{ key }" content="{ og[key] }" />
{/each}
<!--Twitter Spec for ... Twitter -->
{#each Object.keys(twitter) as key}
<meta name="twitter:{key}" content={ twitter[key] }/>
{/each}
<link rel="alternate" hreflang={ language } href={ og.url } />
<link rel="canonical" href={ og.url }/>
</svelte:head>