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

Inactive User  Here is how it works, make sure that the Lithium Opengraph configuration is turned off, to avoid conflicting tags on the pages. You can get more details here.

I hope this helps.

VarunGrazitti Thank you, however, there are a few important questions unanswered on that page.

1. What about a default OG image if the user doesn't add any images

2. How to make each page have a different image taken from the (say, first) image included?

Also,  how do I turn of Lithium Open Graph? Just have no image path in the input area?

Inactive User - Try this custom code here, may help. Another option is to get in touch with the support to get a definitive answer.

Thanks VarunGrazitti 

I've been working on a custom component myself but this is helpful too! 

I'll post it when finished.

Inactive User 

Hello! I'm also trying to get cover photos to show up as og:images and ran into this discussion. How is the component going along? 

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>