Implement more SEO junk in the OGPreview thing.

main
Zed A. Shaw 2 years ago
parent 6c54f5a9d5
commit ab98610fa6
  1. 31
      client/components/OGPreview.svelte
  2. 13
      commands/templates/client/config.js
  3. 8
      rendered/pages/test_video_card.svelte

@ -1,9 +1,11 @@
<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": "", // URL to article
"url": config.og_base_host, // URL to article
"type": "website", // not mentioned on linked in but needed
}
@ -11,20 +13,36 @@
// 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": "", // @username of content creator
"description": "", // max 200 chars
"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": "", // @username of site
"title": "", // max 70 chars title
"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] }" />
@ -34,4 +52,7 @@
{#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>

@ -63,7 +63,11 @@ export const product_id = 1;
*/
export const base_host = 'http://127.0.0.1:5001';
/*
* This is for the OGPreview component.
*/
export const og_base_host = "http://127.0.0.1:5001";
/*
Used in emails and pages to tell people who to email.
*/
@ -119,4 +123,11 @@ export const twitter_user = "@lzsthw";
/*
Primarily used in the `commands/gen_players.js` command to generate various "cards", such as Video player cards for Twitter or OG Video cards for LinkedIn and Facebook.
*/
export const site_name = "127.0.0.1:5001";
export const site_name = "Bandolier Template";
export default {
fake_payments, webtorrent, btcpay_url, product_id,
og_base_host, support_email, paypal_public, stripe_public,
darkmode_default,
site_name, twitter_user, log_levels, register_enabled,
}

@ -2,7 +2,7 @@
import Layout from "$/rendered/Layout.svelte";
import OGPreview from "$/client/components/OGPreview.svelte";
import { Hydrate } from '@jamcart/7ty/components';
import { og_base_host, base_host } from "$/client/config.js";
import config from "$/client/config.js";
import Video from "$/client/components/Video.svelte";
let source = "/videos/sample.mp4";
let poster = "/images/sample.jpg";
@ -18,17 +18,17 @@
"title": "LJSTHW OG/Twitter Video Test", // title of the article
"description": "A simple test of the OG/Twitter style of sharing cards with video.", // description for inside preview
"image": poster, // image to display, 5mb/1200/627 max
"url": `${ og_base_host }/test_video_card.html`, // URL to article
"url": `${ config.og_base_host }/test_video_card.html`, // URL to article
"type": "website", // not mentioned on linked in but needed
}
let twitter = {
"card": "player", // must be summary, summary_large_image, app, player
"creator": "@lzsthw", // @username of content creator
"creator": config.twitter_user, // @username of content creator
"description": og.description, // max 200 chars
"image": og.image,
"image:alt": "A drawing of Zed by Zed.", // max 420 chars image alt
"site": "@lzsthw", // @username of site
"site": config.twitter_user, // @username of site
"title": og.title,
"player": `${ og_base_host }/video_container.html`,
"player:width": "1280",

Loading…
Cancel
Save