Open Graph Introduction
Open Graph Tutorial
Using open graph with Svelte
svelteboard.com
Open Graph Tutorial
Using Open Graph to make your links more shareable.
Result
Put this in your <svelte:head>
<title>Open Graph Tutorial</title>
<meta property="og:title" content="Open Graph Tutorial" />
<meta property="og:site_name" content="Svelte Board"/>
<meta property="og:url" content="https://svelteboard.com/tutorials/open-graph"/>
<meta property="og:description" content="Using Open Graph to make your links more shareable." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://svelteboard.com/content/yourimage.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="Open Graph Tutorial" />
<meta property="og:site_name" content="Svelte Board"/>
<meta property="og:url" content="https://svelteboard.com/tutorials/open-graph"/>
<meta property="og:description" content="Using Open Graph to make your links more shareable." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://svelteboard.com/content/yourimage.png" />
<meta name="twitter:card" content="summary_large_image" />
og:title
The title of your page, content, object etc. as you would like for it to appear when displayed.
og:site_name
The name of your site.
og:url
This will be the URL that will be associated with your content ie the link.
og:description
Around 200 characters is recommended for the description.
og:type
There are other types besides article, website, and video.
og:image
1200×630 px is the recommended size for this image. Use the absolute path rather than a relative path here.
twitter:card
summary_large_image is the most common, but there are other options.