I recently discovered a significant issue where images did not appear when sharing my website on SNS... I'm not sure since when this has been happening, but upon checking, I found that the meta image information, such as og image (open graph) and twitter image tags, were missing. In resolving this issue, let’s look at how to add meta images.

Screenshot) Meta image added to webisfree.com

The above meta image can also be checked through the link below.
https://webisfree.com/webisfree_og.jpg

# Adding Meta Images to Websites

Before adding meta images, it’s well known that for SEO, Search Engine Optimization, meta images are very important. Let's first look at when it's necessary to add meta images.

! When Are Meta Images Necessary?

Website meta images, or Open Graph (OG) images, are used when sharing content on social media platforms. This is also true for KakaoTalk. When a user shares a website's URL, the specified meta image will be displayed in the post, enabling more attractive and professional sharing. Let's look in detail below at how to add meta images.

@ Adding Meta Images, og image, twitter image
The step-by-step guide for setting up meta images on a website is as follows. Let’s look at each step.

** Creating OG Images **
- Design an image that represents your website or a specific page.
- For optimal display on high-resolution devices, the image should be at least 1200 pixels wide and 630 pixels tall.

** Uploading the Image to a Web Server **
- Once the image is created, upload it to a web server and make it accessible through a URL.

** Adding Meta Tags **
- Now, add the appropriate meta tags to the `head` section of the HTML document, as shown below. This is arguably the most crucial step.

@ Facebook (Open Graph) Example

@ Twitter (Twitter Card) Example

** Repeat the Process for Each Page **
If different pages have different images, repeat this process for each page. In other words, you may need different settings for each representative image of a page.

Furthermore, all added meta images should be set to public access. If they are private, please change them to public. Also, if image updates are not immediately reflected, you may need to clear validation tools and social media platform caches. Changes may also be reflected later due to internal caches.

Lastly, to verify that meta images have indeed been added, consider using SEO validation tools or actually share specific posts on SNS to check if the images are displayed well.

For Facebook Open Graph,
Use [Facebook Sharing Debugger] https://developers.facebook.com/tools/debug/).

For Twitter Cards,
Use [Twitter Card Validator] https://cards-dev.twitter.com/validator).

This concludes a brief overview of how to add meta images.