How to connect SNS shared images and blogs using character stickers
- The picture on a blog and the first impression on social media are different.
- People often encounter the first instance of a piece of writing before they meet the characters.
- Create three pictures by dividing them from a single original.
- First, check the preview before focusing on aesthetics.
- The most common point of difficulty when attempting to resolve issues directly.
- Using DecoBlocks to divide the character spaces for the main text.
- Start small, and once you have accumulated enough posts, share them.
- Frequently Asked Questions.
- WordPress-related plugins
After posting a blog post and pasting its URL on social media, have you ever found the character’s face in the preview image half cut off? Sometimes, an image that looks fine on the blog appears distorted or separate from the title when shared.
The only question is this: How can character stickers be used to seamlessly connect a blog and social media?
The solution is not to simply copy a single sticker and use it everywhere. Instead, you need to prepare separate images for the blog’s featured image and for sharing on social media, all derived from a single original character design.
The picture on a blog and the first impression on social media are different.
In WordPress, the featured image is a picture that represents a post or page. It appears in various locations depending on the theme, such as in the list of posts, the header, or the top of the main content area.
On the other hand, the picture that appears when a URL is shared on social media is a preview image of the webpage. This information is called “Open Graph,” which is an agreement that allows webpages to inform other services about their title, URL, and representative image.
In the shared screen view, “og:title” refers to the title, “og:url” refers to the page URL, and “og:image” refers to the shared image. It is also possible to specify the width and height of the image, as well as an alternative description.
The featured image and the shared image do not have the same function.
Therefore, simply because a featured image is added to a blog, it cannot be assumed that all social media platforms will automatically import that image.
People often encounter the first instance of a piece of writing before they meet the characters.
Let’s say someone discovers an unfamiliar blog post on social media. Before clicking the link, the first thing they see is the title and a small preview.
At this point, characters that repeatedly appear can serve as a visual cue to identify accounts and blogs. When a reader encounters the same round face and color seen before, the unfamiliar URL becomes slightly less unfamiliar.
Characters serve as visual cues to aid memory.
However, having a character does not automatically increase website traffic or search engine rankings. A character is a first greeting, but it is not a device to force readers to come inside.
Specifically, the methods for sharing links and for uploading images themselves may differ. Some services treat the sharing of articles that include links separately from the sharing of images, where the image assets are uploaded first.
Create three pictures by dividing them from a single original.
The correct approach is not to use the same sticker everywhere. Instead, maintain consistency in the character’s facial expressions and colors, while adapting the canvas and text to suit the specific application.
Initially, it is sufficient to determine only these three things.
- The original image captures the character’s facial expressions and posture.
- Featured image representing the content of the blog post.
- A social media sharing image that displays the title and URL to be shown to the person you want to share it with.
In the blog post, use characters to enhance the content. You can place small pictures of facial expressions next to the descriptions, or use scenes featuring characters to set the tone of the text.
In shared images on social media, the character takes on the role of introducing the post. The title and the character should be presented together within the same image, and the permalink should serve as the actual link.
Dividing the content into versions for different uses (e.g., main text and shared content) can reduce cropping.
In the featured image block of WordPress, you can adjust the image’s aspect ratio, width, height, size, and cropping method. If the original image’s face is not centered, you can often reduce the amount of cropping simply by changing the cropping position.
First, check the preview before focusing on aesthetics.
WordPress can create multiple image sizes from a single original image. Themes or developers can register additional sizes, and the cropping position can be set to the center, left, right, top, middle, or bottom.
This feature is convenient, but the required image changes depending on the screen. An image that looks good in a blog list may not display the face or speech bubble properly in an SNS preview.
Even the same file can be cropped differently on different screens.
Also, even if multiple images are declared in the shared information, the desired image may not always be selected. This is because, in Open Graph, the image declared first in the document may be prioritized.
Therefore, before posting, be sure to actually share the URL. You need to check whether the featured image and the social media preview show the same picture, and whether the title and character are readable together.
Sometimes, even after changing an image, the old preview may remain. Do not consider the work complete after making a single correction to the picture; instead, include time in your workflow to view the actual shared screen just before posting.
Checking the preview is not the final step in the customization process.
The most common point of difficulty when attempting to resolve issues directly.
Hand-drawn characters add warmth to posts, but if the decorations become larger than the main text, readers will find it difficult to read the content. If multiple large stickers overlap on the first screen of an informational post, it can feel distracting rather than cute.
It is important to be careful when using the same file in different places. Because each platform may crop the preview differently, faces, speech bubbles, and key phrases may be cut off and appear outside the visible area.
The most common problem when trying to resolve these issues directly is not the image itself, but the connection between them. For example, a featured image might be registered, but the sharing screen displays a different picture, or a new image is uploaded, but an old picture continues to appear.
The problem lies not in the picture itself, but in the connection.
Adjusting the proportions for each image manually, repositioning the characters, and even checking the actual shared screen takes more time than you might think. This is because creating the image file and ensuring that the webpage correctly points to that file are separate tasks.
Even if you are using tools to manually decorate the main text, avoid trying to force the layout and the social media sharing image to fit within a single screen. It is safer to prepare separate character assets for the main text and separate files for sharing.
While the tool may reduce the time required for production, it does not substitute for the verification process.
Using DecoBlocks to divide the character spaces for the main text.
If you are in the process of deciding where to place a character within the content, you can use the “Insert Character Sticker” feature in DecoBlocks to insert character images from an installed sticker pack. This feature can be used as a block in the Block Editor or as a shortcode in the Classic Editor, allowing you to place the same type of decoration depending on your editing environment.
When you want to separate the roles of characters and descriptions, you can use speech bubbles or section boxes. You can apply highlighting to important sentences, and the H2 and H3 headings in the text can automatically generate a table of contents, allowing you to organize the decoration and structure of the main body separately.
However, this function is in a different area than creating files for sharing on social media or verifying an actual preview. Character arrangement for the main text should be organized using DecoBlocks. The aspect ratio of the shared image, the URL linking, and the actual sharing screen verification must be performed separately, following the methods described earlier.
Start small, and once you have accumulated enough posts, share them.
If you are just starting a blog, choose one original image, one featured image, and one social media sharing image. First, make sure that the permalink is working correctly and that the image is displayed properly in the sharing screen.
It is not necessary to create many templates from the beginning.
For each post, you can slightly change the character’s pose or accessories. However, to ensure that the impression remains that it is the same character, the face, color, and manner of speaking must be kept consistent.
When you have accumulated a number of posts, divide the shared image templates by post type. If you create different first instances for “how-to” posts, “daily life” posts, and “product introduction” posts, the workflow will be more consistent.
In classic themes, the theme may need to support the featured image function. In block themes, support for the featured image is automatically enabled, but you must verify how the actual screen and shared information are connected.
Ultimately, the key to connecting blogs and social media is not the character itself, but the URL and content of the posts. The character helps to make the connection easier to remember, and the images must be designed separately to be displayed correctly on each screen.
Break it down into smaller parts and check it on the actual screen.
The original character assets are divided into versions for the main text and for sharing on social media, and it is necessary to verify that they are displayed correctly on each screen. The process of organizing the relationship between the character and the description within the main text involves features such as DecoBlocks’ “Insert Character Sticker,” “Speech Bubble,” and “Section Box.”
Conversely, the ratio of shared images and the URL linking are separate verification items. Distinguishing these two tasks allows the character to add warmth to the text, while the shared screen displays the opening scene of the post.
Frequently Asked Questions.
Q. Once the featured image is selected, does the image automatically used for sharing on social media also become the same picture?
A. It cannot always be assumed that they are the same. The featured image and the og:image setting for sharing may be technically separate, so it is necessary to check which image is actually displayed in the shared preview.
Q. The featured image is not appearing on my blog. What should I check first?
A. If you are using a classic theme, check whether the theme supports the featured image function. First, check if the featured image is displayed correctly in both the post editing screen and the actual post screen, even with block themes.
Q. Can this problem be easily solved using a tool?
A. Tools that place characters within the main content can help reduce the amount of manual work required. However, these tools do not automatically guarantee that images will be shared on social media or that website traffic will increase. Therefore, it is necessary to separately create files for sharing and to check the actual preview.
Q. Are there tools for adding characters and descriptions to the main text?
DecoBlocks allows users to insert character images from installed sticker packs into posts, and to organize related content using speech bubbles and designated areas.
Important sentences can be highlighted, and a table of contents can be automatically generated based on H2 and H3 headings. However, creating shareable images for social media and verifying the actual preview require separate processes.
