Adding Social Sharing Images in SvelteKit

Rodney Lab - Mar 16 '23 - - Dev Community

Adding Social Sharing Images & Meta to your SvelteKit Posts

Continuing our SvelteKit beginner tutorial series, in this installment, we look at adding social sharing images in SvelteKit. We also see how easy it is to add other Search Engine Optimization (SEO) metadata to your Svelte blog posts.

We'll start with the basics, adding a meta description. This is the text snippet we want search engines to show when our blog post appears in search results. Taking it up a level we then look at social sharing images and Schema.org SEO markup. We'll talk more about those later.

SEO Basics: Meta Description

You might have run the Lighthouse tool on your site before and lost some points because you were missing a title element or meta description. These are useful for SEO as they give the search engines some pointers on how to present your page in search results. We already have a title tag within the svelte:head section of our blog post template (src/lib/components/blog/post.svelte). Let's go ahead and add the meta description too:

<script>
  /** @type string */
  export let description;

  /** @type string */
  export let date;

  /** @type string */
  export let slug;

  /** @type string */
  export let title;

  const url = `https://example.com/blog/${slug}`;
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={url} />
</svelte:head>
Enter fullscreen mode Exit fullscreen mode

We also sneaked in a canonical rel tag here. It is a good idea to add this if you are featuring your content on another site as well as your own. It lets search engines know the copy on your site is the original and avoids the guest post being flagged as duplicate content (which can harm your ranking).

Updating Post Content

You might have noticed we included description and slug fields among the imports in the last section. We have not added them to our post front matter yet though! We can do that now, as well as add some other fields which we will use later. You can edit the file in the CloudCannon Source Editor:

Adding Social Sharing Images & Meta to your SvelteKit Posts: Screen capture shows markdown file for blog post being edited in the Cloud cannon console with new last_updated, slug, description, og_image and image_alt fields added to front matter.

When you click save, the changes are automatically synced to your git repo.

Add the following new fields to the front matter in each blog post:

  • last_updated: date of last update (2023-02-02 for example),
  • slug: this will be bed, nose or sniffing to match the post path,
  • description: a short snippet of text which search engines can show in results,
  • og_image: bed-og.jpg, nose-og.jpg or sniffing-og.jpg to match the post,
  • image_alt: alt text to describe your images, you might want to add this once you have the images in place, but don't forget to come back to it!

Social Share Images

Another common practice in SEO is to add images which show up when visitors share your post on social media. Without using metadata to tell the social apps which image you want to use here, the platform might take any image on the page and even place an ugly crop on it!

Before we can add the meta we need a picture. You want something engaging and related to the post. There are many options for creating these social sharing images now. You might decide to craft a prompt for your favorite AI platform and let it create a custom image for you. Alternatively, you could use a tool like Satori to generate your images. We will target images which are 1200 pixels wide and 627 pixels tall. If you're lacking inspiration we have some stock images you can opt for (bed-og.jpg, nose-og.jpg and sniffing-og.jpg).

As before you can work in the CloudCannon console here. Create a new static/assets folder in the project and drop the three images in there. Name them bed-og.jpg, nose-og.jpg and sniffing-og.jpg.

Adding Social Sharing Images & Meta to your SvelteKit Posts: Screen capture shows mark down file for blog post being edited in the Cloud cannon console. User is in the Files section and has opened up the + Add menu. Create new folder is highlighted.

Open Graph Svelte Markup

You might prefer to work on your local code editor for the next part. Remember to do a git pull so you have the updated Markdown files as well as new images available locally.

Let's go back to the blog post template and add the Open Graph markup:

<script>
  // ...TRUNCATED
  /** @type string */
  export let image_alt;

  /** @type string */
  export let last_updated;

  /** @type string */
  export let og_image;

// TRUNCATED...
</script>

<svelte:head>
  // TRUNCATED...

  <meta property="og:site_name" content="Svelte’s Homepage" />
  <meta property="og:locale" content="en" />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="article" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={`/assets/${og_image}`} />
  <meta property="og:image:alt" content={image_alt} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="627" />
</svelte:head>
Enter fullscreen mode Exit fullscreen mode

Open Graph came out of Facebook but now, most social platforms will make use of this meta. You can see we added a little more data than just the images. This is all meta which the social platforms can use whenever a visitor to your site shares the page on a social site.

We put the images in the static folder under a new assets directory. The static folder in SvelteKit is for anything which does not need processing. The images fall into this category, we can serve up JPG or PNG images and do not even have to worry about including next-gen formats like WebP or AVIF. As an example, the nose post will have its Open Graph image available at https://example.com/assets/nose-og.jpg. We just drop the files in static/assets, add the og_image field to the post front matter and SvelteKit takes care of the rest.

Schema.org Svelte Markup

Finally we will add a spot of Schema.org markup. This is markup designed to let the search engines know more about our page content and generate featured snippets. For example, on an e-commerce site product page, you can include meta on the price and availability of the featured product. Schema.org is quite an advanced SEO topic so we will just scratch the surface here, but explore Schema.org if you are keen to learn more.

Schema.org markup goes into a script tag with type set to application/ld+json. This is a little different to the other meta we added.

<!-- EXAMPLE ONLY -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://example.com/blog/nose#webpage",
      "url": "https://example.com/blog/nose",
      // TRUNCATED...
  ]
}
</script>
Enter fullscreen mode Exit fullscreen mode

That said we can still add it to the svelte:head element. The script tag body will be JSON and we can build it up using JavaScript code in the top, script, section of our blog template:

<script>
  // ...TRUNCATED

  const schemaOrgWebPage = {
    '@type': 'WebPage',
    '@id': `${url}#webpage`,
    url,
    name: title,
    isPartOf: {
      '@id': 'https://example.com/#website'
    },
    datePublished: date,
    dateModified: last_updated,
    author: {
      '@id': 'https://example.com/#/schema/person/#author'
    },
    description,
    inLanguage: 'en',
    potentialAction: [
      {
        '@type': 'ReadAction',
        target: [url]
      }
    ]
  };

  const schemaOrgObject = {
    '@context': 'https://schema.org',
    '@graph': [schemaOrgWebPage]
  };
  let jsonLdString = JSON.stringify(schemaOrgObject);
  let jsonLdScript = `
    <script type="application/ld+json">
      ${jsonLdString}
    ${'<'}/script>
  `;
</script>

<svelte:head>
  ...TRUNCATED

  {@html jsonLdScript}
</svelte:head>

<!-- TRUNCATED -->
Enter fullscreen mode Exit fullscreen mode

The value for jsonLdScript looks a little unwieldy! This just prevents automated formatters from unwittingly breaking the code. Inspect the element in your browser and it should not look too different to the example above.

Adding Social Sharing Images in SvelteKit: What’s next?

We saw a few different elements of technical SEO in this post on adding social sharing images in SvelteKit. There is a lot to dive deeper into. Even so, we have covered most bases in the Svelte code here and you should be able to take it quite far, exploring the most interesting aspects for your project in more detail. Facebook and Twitter provide tools for checking that your Open Graph meta is up to spec. There is also a Google tool for checking your Rich results. You can learn more about the Svelte @html template syntax in the Svelte docs.

Finally I want to briefly mention CloudCannon — it's a content management system with first-class support for SvelteKit. It syncs directly with your Git repository, so your development team can continue working in SvelteKit while your content team can manage the content on the site. It's the best of both worlds.

Thanks for reading and keep on building with SvelteKit!

Image
Kanapy: Klucz do Komfortu i Stylu w Twoim Domu
Image
petunjuk memutuskan situs slots online amat memberikan keuntungan
Image
provider slots online terunggul yang wajar dicoba banyak betaruh
Image
What is Spring Boot? A Complete Guide to Simplifying Java Development

spring, api, microservices, rest
Image
Istanbul usage in tRPC source code

javascript, typescript, test, istanbul
Image
Fixing SSR Rendering Issues with Angular Resolver for Async Pipe Data

angular, ssr, learning, frontend
Image
[KOSD] Change of FromQuery Model Binding from .NET 6 to .NET8

aspnet, c, core, experience
Image
Discover the Blessings of Reading Surah Yaseen

readsurahyaseen, pdfsurahyaseen, onlinesurahyaseen
Image
Spring Boot and GraphQL: Creating a GraphQL API

spring, api, graphql
Image
Kubernetes Probes

kubernetes, devops, security
Image
StatefulSets in Kubernetes

kubernetes, devops, security
Image
OAuth2 Grant Types Explained: Which One Should You Use?

authentication, authorization, oauth2
Image
mengapa mesti bermain slots online di web judi bisa dipercaya?
Image
How to Register Permissions in Strapi Plugin

webdev, strapi
Image
Spring Boot DevTools: Speeding Up Development with Hot Reloads

spring, devex
Image
18/365 Days | ¥10M Japan Job Challenge

japan, career
Image
Vietnamese Engineers for Outsourcing

outsourcing, developers, ai, vietnam
Image
How The 10 Most Disastrous Asbestos Cancer Lawsuit Mesothelioma Settlement Failures Of All Time Could've Been Prevented
Image
Implementing OAuth2 for Microservices Authentication

api, authentication, authorization, oauth2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .