Open Graph Image cropping

[robertjf]

Using the <meta-tags></meta-tags> tag helper doesn't appear to be cropping the image to the recommended size for twitter/facebook. Consequently, we need to upload a separate cropped image.

It would be really useful to be able to have an appropriate crop set on render, but even better would be if we could actually specify the crop ourselves in the SEO content app.

[robertjf]

Actually, it looks like the open graph meta tags for twitter are completely missing?

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

I don't see any of the tags present in rendered output:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

It's worth reviewing the "Twitter Cards and Open Graph" section on this page: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

At a minimum, we need:

• twitter:card (either summary or summary_large_image should be supported)

The following would also be beneficial:

• twitter:site
• twitter:creator
• og:url

[robertjf]

Just noticed that the twitter meta fields issue is already mentioned here: #191 - looking forward to an update on this :)

[robertjf]

After digging into the code a bit, I discovered this:

    public class MetaFieldsAppSettingsModel
    {
        public string[] SupportedMediaTypes { get; set; } = new[] { ".png", ".jpg", ".jpeg", ".webp", ".gif" };
        public string OpenGraphCropAlias { get; set; } = "openGraphImage";
        public string[] DisabledModules { get; set; } = Array.Empty<string>();
    }

I've now added the crop alias to the Image Media Type, however it's still not applying the crop when the tags are rendered:

<meta property="og:image" content="https://youritteam.com.au/media/jp2nilmn/umbraco-banner.jpg">

[patrickdemooij9]

Hi @robertjf, Sorry for the late reply. Let me go through all your questions

Using the tag helper doesn't appear to be cropping the image to the recommended size for twitter/facebook. Consequently, we need to upload a separate cropped image. It would be really useful to be able to have an appropriate crop set on render, but even better would be if we could actually specify the crop ourselves in the SEO content app.

Yeah, it currently doesn't crop images automatically yet. Not quite sure why I haven't added this yet, but I am happy that you were able to find the special crop alias. Just find it a bit strange that it doesn't seem to work. Did you add the crop here: Or on a different spot?

Twitter tags As for the twitter tags, they are still a work in progress. Time has unfortunately been a bit short, but I am hoping to be able to pick it up in the coming weeks.

[robertjf]

@patrickdemooij9 re the crop, it's on the actual Media type:

[robertjf]

@patrickdemooij9 I managed to get this working with the latest version, closing this now.