Programmable Media

Social media image cards in Svelte (video tutorial)

Last updated: Sep-12-2024

Overview

This video tutorial teaches you how to create dynamic social media cards using the CldOgImage component from the Svelte community-developed library in your existing Svelte application.

Video tutorial


Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  0:00 Social cards are a great tool for increasing engagement on a link shared on a social media platform. However, they can be challenging to create and configure in your Svelte application, especially when you want to make these cards dynamic. The Svelte community-developed library simplifies this process, and in this tutorial, you'll see how to use this SDK to create dynamic social cards for a blog website.

Importance of social cards

Jump to this spot in the video  0:22 Social cards display text and images for a page when the link is shared on social media platforms. The more eye-catching these cards are or the more context they provide, the more they can entice your audience to click such links. You can configure the text and images on these cards using OG tags and X (Twitter)-specific tags. It has become crucial to add text directly to your images for X cards because titles have been removed from social cards on X, which also removes important context for your visitors.

Using CldOgImage component

Jump to this spot in the video  0:55 You can easily configure these cards using the CldOgImage component from the Svelte community-developed library in your existing Svelte application. Ensure you have Svelte and Cloudinary installed and set up. For a blog website, import the CldOgImage component from the Svelte community-developed library and use it by passing the public ID of your image to the src prop. You can use the OGraph Previewer extension to check the social card for different blog posts.

X (Twitter) props

Jump to this spot in the video  1:33 You also have to pass the alt and twitterTitle props for the titles that appear on the social cards.

Adding context with overlays

Jump to this spot in the video  1:38 You can add more context to your cards using the effects and overlays provided by Cloudinary. For example, you can overlay the title text on your image. By using effects like blur and text overlays with dynamic content such as post.title, you can create visually appealing and contextually relevant titles based on the specific blog post title.

Advanced configurations - two overlays

Jump to this spot in the video  2:03 For more advanced configurations, you can add multiple overlays, including an overlay for the image title and tagline. This setup allows for a more comprehensive and visually appealing social card. By previewing these configurations, you can ensure that your social cards are dynamic and informative, increasing the likelihood of engagement when shared on social media platforms like X (Twitter).

Advanced configurations - three overlays

Jump to this spot in the video  2:37 Here's the configuration for adding multiple overlays, including an overlay for the image name, the title, and the tagline.

Keep learning

Related topics

If you like this, you might also like...

Upload Assets in SvelteKit
Upload assets using the Upload widget in a SvelteKit app
Gravity Crops for Images
Indicate which areas to keep when cropping
Optimization Tips
Tips for delivering optimized images

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: