Moving the OG to SEO thing.

main
Zed A. Shaw 10 months ago
parent 7057ca0e5f
commit 49f55e673c
  1. 4
      admin/bando/Components.svelte
  2. 6
      admin/bando/demos/SEOTricks.svelte
  3. 6
      admin/bando/demos/SEOTricks.svelte.md

@ -27,7 +27,7 @@
import Markdown from "$/client/components/Markdown.svelte";
import MarkdownDemo from "./demos/Markdown.svelte";
import Modal from "./demos/Modal.svelte";
import OGPreview from "./demos/OGPreview.svelte";
import SEOTricks from "./demos/SEOTricks.svelte";
import Pagination from "./demos/Pagination.svelte";
import PlaceHolder from "./demos/PlaceHolder.svelte";
import Progress from "./demos/Progress.svelte";
@ -79,7 +79,7 @@
{title: "Login", active: false, icon: "log-in", component: Login},
{title: "Markdown", active: false, icon: "file", component: MarkdownDemo},
{title: "Modal", active: false, icon: "maximize", component: Modal},
{title: "OGPreview", active: false, icon: "external-link", component: OGPreview},
{title: "SEOTricks", active: false, icon: "external-link", component: SEOTricks},
{title: "Pagination", active: false, icon: "skip-forward", component: Pagination},
{title: "PlaceHolder", active: false, icon: "image", component: PlaceHolder},
{title: "Progress", active: false, icon: "thermometer", component: Progress},

@ -1,12 +1,12 @@
<script>
import OGPreview from "$/client/components/OGPreview.svelte";
import SEOTricks from "$/client/components/SEOTricks.svelte";
import { base_host } from "$/client/config.js";
let og = {
"title": "LJSTHW OG Card Test", // title of the article
"description": "A simple test of the OG style of sharing cards.", // description for inside preview
"image": `${ base_host }/images/zed.png`, // image to display, 5mb/1200/627 max
"url": `${ base_host }/client/#/bando/demos/OGPreview`, // URL to article
"url": `${ base_host }/client/#/bando/demos/SEOTricks`, // URL to article
"type": "website", // not mentioned on linked in but needed
}
@ -21,7 +21,7 @@
}
</script>
<OGPreview og={ og } twitter={ twitter} />
<SEOTricks og={ og } twitter={ twitter} />
<style>
card {

@ -15,13 +15,13 @@ Svelte:Head Sort-of-Bug
One thing to keep in mind is if you place these `<meta>` tags directly in a page then they'll get duplicated on each page visit. This is because Svelte is updating the DOM for the page, but seems to not consider the `<svelte:head>` as idempotent as other elements in the DOM. The fix is to move all uses of `<svelte:head>` into a component so Svelte properly updates them on page changes.
The code for `OGPreview.svelte` does this, which means you *do not* put it into a `<svelte:head>`. Instead you do this:
The code for `SEOTricks.svelte` does this, which means you *do not* put it into a `<svelte:head>`. Instead you do this:
<pre><code data-language="javascript">
&lt;OGPreview og={ og } twitter={ twitter} />
&lt;SEOTricks og={ og } twitter={ twitter} />
</code></pre>
Then `OGPreview` does everything for you. If you run into this bug in your own development use the `client/components/HeaderOnce.svelte` component like this:
Then `SEOTricks` does everything for you. If you run into this bug in your own development use the `client/components/HeaderOnce.svelte` component like this:
```
<HeaderOnce>
Loading…
Cancel
Save