How does social media select which image to preview as the OG image?

pepitaK Here's the component. It's a bit more complex than you might need but I've created it to give different OG defaults in different places. Hope this helps.

<#-- OPEN GRAPH -->
<#assign dam = 'https://www.jmp.com/content/dam/jmp/images/jmp-community/'/>
<#assign hasRun = false />
<#assign titleSubject = ""/>
<#function imgType imgPath >
    <#assign contentType = 'image/png'/>
    <#if imgPath?keep_after_last('.') == 'jpg' || imgPath?keep_after_last('.') == 'jpeg' >
        <#assign contentType = 'image/jpeg'/>
    </#if>
    <#if imgPath?keep_after_last('.') == 'svg'>
        <#assign contentType = 'image/svg'/>
    </#if>
    <#return contentType/>
</#function>

<#macro setOGProps type>
    <#if hasRun == true>
        <#return />
    </#if>
    <#assign hasRun = true />
<!-- set OGProps type ${type} -->
    <#if type == 'topic'>
        <#assign myId = "${page.context.thread.topicMessage.uniqueId}">
        <#assign titleSubject = page.context.thread.topicMessage.subject />
    </#if>
    <#if type == 'message'>
        <#assign myId = "${page.context.message.uniqueId}">
        <#assign titleSubject = page.context.message.subject />
    </#if>

    <!-- MyId ${myId} -->
    <#assign msgQuery = "SELECT * FROM messages WHERE id='${myId}'"/>
    <#assign msgs =  rest("2.0", "/search?q=" + msgQuery?url + "&restapi.response_style=view").data.items![] />

    <#if msgs?? && msgs[0]?? && msgs[0].cover_image??>
        <!-- msgs cover image OK -->
        <#assign ogImgUrl=msgs[0].cover_image.large_href />
    <#else>
        <#assign imgQuery = "SELECT * FROM images WHERE messages.id='${myId}'"/>
        <#assign images = rest("2.0", "/search?q=" + imgQuery?url + "&restapi.response_style=view").data.items![] />
        <#if images??>
            <!-- images exist? ${images???c} -->
            <#if images?size gt 0>
                <!-- images size ${images?size} -->
                <#if images[0]??>
                    <#if images[0].large_href??>
                        <!-- image large_href -->
                        <#assign ogImgUrl=images[0].large_href />
                    <#else>
                        <!-- image original_href -->
                        <#assign ogImgUrl=images[0].original_href />
                    </#if>
                </#if>
            <#else>
                <#assign ogImgUrl="https://www.jmp.com/content/dam/jmp/media/JMP-Open-Graph-Default.jpg"/>
            </#if>
        </#if>
    </#if>

    <!-- PAGE / THREAD OPEN GRAPH CONTENT -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "${titleSubject}"/>
    <meta property = "og:image" content = "${ogImgUrl}"/>
    <meta property = "og:image:type" content = "${imgType(ogImgUrl)}"/>
    <meta property = "og:url" content = "${msgs[0].view_href}"/>
    <meta property = "og:description" content = "${msgs[0].subject}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#macro>

<#macro setOGMisfits>
    <!-- CATEGORY OPEN GRAPH CONTENT -->
    <#assign hasRun = true />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "${page.content.body.title}"/>
    <meta property = "og:url" content = "${coreNode.webUi.url}"/>
    <meta property = "og:description" content = "${coreNode.description}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#macro>

<#if env.context.message??>
    <!-- env.context.message -->
    <@setOGProps type='message'></@setOGProps>

</#if>

<#if page.context.message??>
    <!-- page context message -->
    <@setOGProps type='message'></@setOGProps>
</#if>

<#if page.context.thread??>
    <!-- page context thread message -->
    <@setOGProps type='topic'></@setOGProps>
</#if>

<#if env.context.thread??>
    <!-- env context thread message -->
    <@setOGProps type='topic'></@setOGProps>
</#if>

<#if page.name == 'CommunityPage'>
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/jmp-community-social.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>

<!-- CORENODE ID ${coreNode.id} -->

<#if coreNode.id  == 'add-ins'>
    <!-- add-ins -->
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_green_add-ins.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>
<#if coreNode.id  == 'scripts'>
    <!-- scripts -->
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_purple_scripts.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>
<#if coreNode.id  == 'sample-data'>
    <!-- sample data -->
    <@setOGMisfits></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_red_sample_data.png"/>
    <meta property="og:image:type" content="image/png" />
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#if>



<#if hasRun == false && page.name =="CategoryPage" || page.name == "BlogPage"  || page.name="ForumPage" || page.name="TkbPage">
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "JMP ${page.content.body.title}"/>
    <meta property = "og:url" content = "${coreNode.webUi.url}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:description" content = "${coreNode.description}"/>
    <#assign ogImgUrl=dam+"jmp-og-${coreNode.id}.jpg"/>
    <#if coreNode.id == 'discussions'>
        <#assign ogImgUrl=dam+"jmp-og-discussions.jpg"/>
    <#elseif coreNode.id == 'FileExchange'>
        <#assign ogImgUrl=dam+"jmp-og-filexchange.jpg"/>
    <#elseif coreNode.id  == 'jsl-cookbook-tkb'>
        <#assign ogImgUrl=dam+"jmp-og-cookbook.jpg"/>
    <#elseif coreNode.id  == 'jmp-wish-list'>
        <#assign ogImgUrl=dam+"jmp-og-wishlist.jpg"/>
    <#elseif coreNode.id  == 'Blogs'>
        <#assign ogImgUrl=dam+"jmp-og-blogs.jpg"/>
    <#elseif coreNode.id  == 'discovery'>
        <#assign ogImgUrl=dam+"ds-social-us.jpg"/>
    <#elseif coreNode.id  == 'JMP_Academic'>
        <#assign ogImgUrl=dam+"jmp-og-academic.jpg"/>
    <#elseif page.name  == 'GroupPage'>
        <#assign ogImgUrl=dam+"jmp-og-groups.jpg"/>
        <#elseif page.name = "TkbPage">
        <#assign ogImgUrl = dam+"JMP-Open-Graph-Default.jpg"/>
    <#else>
        <#assign ogImgUrl=dam+"jmp-og-${coreNode.id}.jpg"/>
    </#if>

    <meta property = "og:image" content = "${ogImgUrl}"/>
    <meta property = "og:image:type" content = "${imgType(ogImgUrl)}"/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>


</#if>