Default website image for social sharing

后端 未结 5 1707
小鲜肉
小鲜肉 2020-12-02 12:06

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

相关标签:
5条回答
  • 2020-12-02 12:35

    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:

    • https://developers.facebook.com/tools/debug/
    0 讨论(0)
  • 2020-12-02 12:37

    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.

    0 讨论(0)
  • 2020-12-02 12:38
    <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

    0 讨论(0)
  • 2020-12-02 12:48

    You need to set the facebook 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

    0 讨论(0)
  • 2020-12-02 12:50

    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:

    • Facebook (see https://developers.facebook.com/docs/sharing/webmasters/#images)
    • Twitter (see https://dev.twitter.com/cards/getting-started#opengraph)
    • LinkedIn (see https://developer.linkedin.com/docs/share-on-linkedin)
    • Google+ (see https://developers.google.com/+/web/snippet/)
    • Pinterest (see https://developers.pinterest.com/docs/rich-pins/reference/)

    (... and probably plenty more besides.)

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

    • Clear the social media platform's cached version of your page's image (e.g. by using the platform's developer tools), so that you can see the change reflected immediately. For example, you can do this for Facebook, at https://developers.facebook.com/tools/debug/
    • Add additional "structured properties" to specify things like the image's width or height, using the syntax described at http://ogp.me/#structured. This is described as a "best practice" by Facebook at https://developers.facebook.com/docs/sharing/best-practices#images.
    0 讨论(0)
提交回复
热议问题