Вопрос

Is there any way to set a default image that appears when I share my website on Facebook? I've noticed that Facebook usually fetches the first image from the site to use as a thumbnail.

Это было полезно?

Решение

You need to set the open graph image meta tag:

<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">

For more info check the docs

Другие советы

<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

Image size should be be at least 200px X 200px

Set an og:image in the <head> of your HTML document like this:

<meta property="og:image" content="http://example.com/ogp.jpg" />

This is part of the Open Graph Protocol, respected by at least the following social media sites:

(... and probably plenty more besides.)

In addition to setting the tag above, you may also want to:

This my solution, it's work well:

<head>
    <!--FACEBOOK-->
    <meta property="og:image" content="https://www.website.com/logo.jpg">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1024">
    <meta property="og:image:height" content="1024">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.website.com/"/>
    <meta property="og:title" content="Website title" />
    <meta property="og:description" content="Website description." />
<head>

You can make test with Facebook Debug site.

Facebook's servers will 'scrape' your website looking for an image to use when people share it. If you want to specify which image to use, put this in the the <head></head> section of your website:

  • <meta property="og:image" content="http://url-to-your-image.png">

Facebook may have cached a copy of the previous random image. To get facebook to fetch again:

<meta property="og:image" content="http://example.com/logo.jpg">
<meta name="twitter:image" content="http://example.com/logo.jpg" />

The above is all you need to update for all social link previews. To check what a preview looks like on a platform you can test your link using the tools below:

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top