Image preview

Hi. I am new here. I want to ask if I can edit the preview image of my site when I am sharing the link at social media.
Thank you.

Yes, of course. You can do it using meta tags.

3 Likes

By meta tags you mean?

Meta tags in HTML.

Search for meta tags in HTML for SEO. You will find helpful content.

1 Like

Most of Social Media, use:

 <meta property="og:title" content="Sample Title To Show">
 <meta property="og:description" content="Hi! Im a sample description!">
 <meta property="og:image" content="http://example.com/thumbnail.jpg">
 <meta property="og:url" content="http://example.com/index.htm">

For Twitter, used this:

<meta name="twitter:title" content="Sample Title To Show ">
<meta name="twitter:description" content=" H! Im a sample description.">
<meta name="twitter:image" content=" http://example.com/thumbnail.jpg"> 
<meta name="twitter:card" content="summary_large_image">
4 Likes

Oh, also due to security system they won’t be previewed on social medias. having your own domain and enabling cloudflare on it will let images to be previewed.

2 Likes

I know that…

The issue is that the logo extends too much at preview.

The photo used in meta preview should be at least 600×315 pixels, but 1200×630 or larger is preferred (up to 5MB). Stay close to a 1.91:1 aspect ratio to avoid cropping and stretching.

Use this meta tag, put this inside your <head> or just before the </head>

<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="336" />

This is the perfect image preview for social media’s.

5 Likes

You mean:

<meta property="og:url" content="http://mysite.epizy.com/">

 <meta property="og:image:width" content="640" />

<meta property="og:image:height" content="336" />
1 Like

It works! Thank you very much.

Congrats, we’re glad to help and Goodluck with your site!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.