I need to be able to plug in a page URL on Facebook and Twitter and display different images.

I imagine this can be done with the og:type, but how do I check the domain in which the image is being displayed?

I created a grid field with a select dropdown option to select FB, TW, or our website, and file options to select different images. When the social media manager goes to FB or Twitter, she needs those images to show depending on which social media platform she's on.

Is this doable using og:type or seo_type, or jquery/js?

  • Could you add which version of EE you are using - this information helps others find answers to questions. Thanks! Jul 19 at 14:11
  • Could you clarify what actually you are asking help with? Is it how to specify preview information for FB/TW (i.e. populate the preview card) or something to do with how you specify the content of a grid field entry? Jul 19 at 14:12
  • @JCOGSDesign I am using EE v5... and yes, I am trying to specify preview info in the preview cards. I had the idea just now to create new variables inside the head depending on of:image or twitter:card, to conditionally pull in the images based on the select dropdown. Does this sound right?
    – mes
    Jul 19 at 14:28

Broadly to get a preview card to show in TW or Facebook you need to specify some information in the <head> area of your HTML page. What information varies according to which service you want the preview to appear on, and you should check the documentation about how to specify these meta tags from OpenGraph (i.e. for Facebook) and Twitter relating to this function to get the full story.

The TLDR; version is that what appears is determined by the content of either opengraph meta-tags (facebook) or twitter meta-tags (twitter).

AFAIK the basic information you need for a preview card to display on each is something like this...

    <!-- Twitter / OpenGraph tags -->
    <meta property="og:title" content="...page title...">
    <meta property="og:type" content="e.g. website|article|profile|product">
    <meta property="og:url" content="... url of page ...">
    <meta property="og:image" content="... url of image to use ...">
    <meta property="og:image:width" content="... in px ...">
    <meta property="og:image:height" content="... in px ...">
    <meta property="og:image:alt" content="... alt text for image ...">
    <meta property="og:description" content="... description ...">
    <meta property="og:site_name" content="... name of site ...">
    <meta property="fb:app_id" content="... site's FB app registration # ...">

    <meta name="twitter:card" content="e.g. summary_large_image|summary|player">
    <meta name="twitter:title" content="...page title...">
    <meta name="twitter:description" content="... description ...">
    <meta name="twitter:site" content="@site_owner_tw_tag">
    <meta name="twitter:url" content="...url of page...">
    <meta name="twitter:creator" content="@creator_tw_tag">
    <meta name="twitter:image" content="...image url...">
    <meta name="twitter:domain" content="...site domain...">

    <link rel="canonical" href="{current_url}">
    <!-- /Twitter / OpenGraph tags -->

You probably don't need all of these (but you can actually have quite a few more if you really want to...), and for the pictures on preview cards the good news is that Twitter will use whatever OpenGraph (i.e. facebook) data you specify for this if you don't specify twitter specific info.

Also, you might find this resource helpful - it gives info on how big the pictures need to be for the various social media platforms that can do previews.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.