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

Question

My understanding is that&nbsp;In DISCUSSSIONS, and BLOGS the user must upload an image into the input area. The first one will be the OG image in Social media. &nbsp;In BLOGS, you can also add the image to the TEASER sectionOn TKB articles, the above is true as well, but the COVER PHOTO should be the default, if uploaded.Is this correct or am I completely off?

inactive user · Answer

Thanks&nbsp;VarunGrazitti&nbsp;I've been working on a custom component myself but this is helpful too!&nbsp;I'll post it when finished.&nbsp;

inactive user · Answer

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

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

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

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

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

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

&lt;#if env.context.message??&gt;
    &lt;!-- env.context.message --&gt;
    &lt;@setOGProps type='message'&gt;&lt;/@setOGProps&gt;

&lt;/#if&gt;

&lt;#if page.context.message??&gt;
    &lt;!-- page context message --&gt;
    &lt;@setOGProps type='message'&gt;&lt;/@setOGProps&gt;
&lt;/#if&gt;

&lt;#if page.context.thread??&gt;
    &lt;!-- page context thread message --&gt;
    &lt;@setOGProps type='topic'&gt;&lt;/@setOGProps&gt;
&lt;/#if&gt;

&lt;#if env.context.thread??&gt;
    &lt;!-- env context thread message --&gt;
    &lt;@setOGProps type='topic'&gt;&lt;/@setOGProps&gt;
&lt;/#if&gt;

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

&lt;!-- CORENODE ID ${coreNode.id} --&gt;

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

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

&lt;meta property = "og:image" content = "${ogImgUrl}"/&gt;
    &lt;meta property = "og:image:type" content = "${imgType(ogImgUrl)}"/&gt;
    &lt;meta property = "og:image:width" content = "1200"/&gt;
    &lt;meta property = "og:image:height" content = "630"/&gt;

&lt;/#if&gt;

varungrazitti · Answer

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

varungrazitti · Answer

Inactive User&nbsp; Here is how it works,&nbsp;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.

inactive user · Answer

VarunGrazitti&nbsp;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 images2. How to make each page have a different image taken from the (say, first) image included?

Forum Discussion

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

Related Content

Preview published URL

Select messages containing video by LiQL query

Can we use Select statement as UserCache Key

Select Kudos with message query

Select * from Categories (returns 0 categories 🤔)

Recent Discussions

Boosting a User

Google Tag Manager and Google Analytics Setup in Aurora platform

In Aurora, add additional <script> and <meta> tags

Incremental data for attachments in messages and replies

Incremental data for users data