Images missing in Twitter/X cards when using Glide prefix

[amadeann]

URL in twitter:image meta tag is not recognized by Twitter/X, when statamic.seo-pro.assets.twitter_preset or statamic.seo-pro.assets.open_graph_preset config value is present, and image assets are stored in Digital Ocean spaces (S3-compatible). Removing both statamic.seo-pro.assets.twitter_preset and statamic.seo-pro.assets.open_graph_preset fixes the issue, but it's not ideal, since this doesn't let me use image optimization.

The URL generated by SEO Pro with presets enabled is like:
https://netzerocompare.com/img/containers/spaces/rare-earth-minerals.jpg/eeb3acd0207df1752a35e0afbfece7ab/rare-earth-minerals.jpg

<meta name="twitter:image" content="https://netzerocompare.com/img/containers/spaces/rare-earth-minerals.jpg/eeb3acd0207df1752a35e0afbfece7ab/rare-earth-minerals.jpg" />

and it's accessible, and similar style URLs work on other social media platforms (for example Facebook). However, Twitter/X seems to get confused, since it appears as malformed url - it contains rare-earth-minerals.jpg string twice.

When I comment out presets in seo-pro config file, the URL is generated in the following format:

https://netzerocompare.fra1.digitaloceanspaces.com/spaces/rare-earth-minerals.jpg

<meta name="twitter:image" content="https://netzerocompare.fra1.digitaloceanspaces.com/spaces/rare-earth-minerals.jpg" />

and in this format Twitter correctly shows the preview card.

This issue is pretty tough to reproduce, since it requires setting up DO Spaces, and can be tested only on publicly accessible URLs (Twitterbot needs to visit the page). And then, there's also an issue with Twitter/X caching the page source for an undefined period of time.

My seo-pro config file for reference (with presets commented out):

<?php

return [

    'site_defaults' => [
        'path' => base_path('content/seo.yaml'),
    ],

    'assets' => [
        'container' => 'spaces',
        // 'twitter_preset' => [
        //     'w' => 1200,
        //     'h' => 600,
        // ],
        // 'open_graph_preset' => [
        //     'w' => 1146,
        //     'h' => 600,
        // ],
    ],

    'sitemap' => [
        'enabled' => true,
        'url' => 'sitemap.xml',
        'expire' => 60,
        'pagination' => [
            'enabled' => true,
            'url' => 'sitemap_{page}.xml',
            'limit' => 100,
        ],
    ],

    'humans' => [
        'enabled' => true,
        'url' => 'humans.txt',
    ],

    'pagination' => [
        'enabled_in_canonical_url' => true,
        'enabled_on_first_page' => false,
    ],

    'twitter' => [
        'card' => 'summary_large_image',
    ],

    'alternate_locales' => [
        'enabled' => true,
        'excluded_sites' => [],
    ],

    'reports' => [
        'queue_chunk_size' => 1000,
    ],

];

[duncanmcclean]

Apologies for the delay in replying... what does your config/statamic/assets.php config look like?

[amadeann]

@duncanmcclean

<?php

return [

    'image_manipulation' => [

        /*
        |--------------------------------------------------------------------------
        | Route Prefix
        |--------------------------------------------------------------------------
        |
        | The route prefix for serving HTTP based manipulated images through Glide.
        | If using the cached option, this should be the URL of the cached path.
        |
        */

        'route' => 'img',

        /*
        |--------------------------------------------------------------------------
        | Require Glide security token
        |--------------------------------------------------------------------------
        |
        | With this option enabled, you are protecting your website from mass image
        | resize attacks. You will need to generate tokens using the Glide tag
        | but may want to disable this while in development to tinker.
        |
        */

        'secure' => true,

        /*
        |--------------------------------------------------------------------------
        | Image Manipulation Driver
        |--------------------------------------------------------------------------
        |
        | The driver that will be used under the hood for image manipulation.
        | Supported: "gd" or "imagick" (if installed on your server)
        |
        */

        'driver' => 'gd',

        /*
        |--------------------------------------------------------------------------
        | Additional Image Extensions
        |--------------------------------------------------------------------------
        |
        | Define any additional image file extensions you would like Statamic to
        | process. You should ensure that both your server and the selected
        | image manipulation driver properly supports these extensions.
        |
        */

        'additional_extensions' => [
            // 'heic',
        ],

        /*
        |--------------------------------------------------------------------------
        | Save Cached Images
        |--------------------------------------------------------------------------
        |
        | Enabling this will make Glide save publicly accessible images. It will
        | increase performance at the cost of the dynamic nature of HTTP based
        | image manipulation. You will need to invalidate images manually.
        |
        */

        'route' => 'img',
        'cache' => true,
        'cache_path' => public_path('img'),

        /*
        |--------------------------------------------------------------------------
        | Image Manipulation Defaults
        |--------------------------------------------------------------------------
        |
        | You may define global defaults for all manipulation parameters, such as
        | quality, format, and sharpness. These can and will be be overwritten
        | on the tag parameter level as well as the preset level.
        |
        */

        'defaults' => [
            // 'quality' => 50,
        ],

        /*
        |--------------------------------------------------------------------------
        | Image Manipulation Presets
        |--------------------------------------------------------------------------
        |
        | Rather than specifying your manipulation params in your templates with
        | the glide tag, you may define them here and reference their handles.
        | They may also be automatically generated when you upload assets.
        | Containers can be configured to warm these caches on upload.
        |
        */

        'presets' => [
            // 'small' => ['w' => 200, 'h' => 200, 'q' => 75, 'fit' => 'crop'],
            'max_logo_size' => ['w' => 512, 'h' => 512, 'fit' => 'contain'],
            'max_upload_size' => ['w' => 2000, 'h' => 2000, 'fit' => 'max'],
        ],

        /*
        |--------------------------------------------------------------------------
        | Generate Image Manipulation Presets on Upload
        |--------------------------------------------------------------------------
        |
        | By default, presets will be automatically generated on upload, ensuring
        | the cached images are available when they are first used. You may opt
        | out of this behavior here and have the presets generated on demand.
        |
        */

        'generate_presets_on_upload' => true,

        /*
        |--------------------------------------------------------------------------
        | Append Original Filename
        |--------------------------------------------------------------------------
        |
        | Append the original filename to Glide generated URLs.
        | This helps with Search Engine Optimization.
        |
        */

        'append_original_filename' => false,

    ],

    /*
    |--------------------------------------------------------------------------
    | Auto-Crop Assets
    |--------------------------------------------------------------------------
    |
    | Enabling this will make Glide automatically crop assets at their focal
    | point (which is the center if no focal point is defined). Otherwise,
    | you will need to manually add any crop related parameters.
    |
    */

    'auto_crop' => true,

    /*
    |--------------------------------------------------------------------------
    | Control Panel Thumbnail Restrictions
    |--------------------------------------------------------------------------
    |
    | Thumbnails will not be generated for any assets any larger (in either
    | axis) than the values listed below. This helps prevent memory usage
    | issues out of the box. You may increase or decrease as necessary.
    |
    */

    'thumbnails' => [
        'max_width' => 10000,
        'max_height' => 10000,
    ],

    /*
    |--------------------------------------------------------------------------
    | File Previews with Google Docs
    |--------------------------------------------------------------------------
    |
    | Filetypes that cannot be rendered with HTML5 can opt into the Google Docs
    | Viewer. Google will get temporary access to these files so keep that in
    | mind for any privacy implications: https://policies.google.com/privacy
    |
    */

    'google_docs_viewer' => false,

    /*
    |--------------------------------------------------------------------------
    | Cache Metadata
    |--------------------------------------------------------------------------
    |
    | Asset metadata (filesize, dimensions, custom data, etc) will get cached
    | to optimize performance, so that it will not need to be constantly
    | re-evaluated from disk. You may disable this option if you are
    | planning to continually modify the same asset repeatedly.
    |
    */

    'cache_meta' => true,

    /*
    |--------------------------------------------------------------------------
    | Focal Point Editor
    |--------------------------------------------------------------------------
    |
    | When editing images in the Control Panel, there is an option to choose
    | a focal point. When working with third-party image providers such as
    | Cloudinary it can be useful to disable Statamic's built-in editor.
    |
    */

    'focal_point_editor' => true,

    /*
    |--------------------------------------------------------------------------
    | Enforce Lowercase Filenames
    |--------------------------------------------------------------------------
    |
    | Control whether asset filenames will be converted to lowercase when
    | uploading and renaming. This can help you avoid file conflicts
    | when working in case-insensitive filesystem environments.
    |
    */

    'lowercase' => true,

    /*
    |--------------------------------------------------------------------------
    | Additional Uploadable Extensions
    |--------------------------------------------------------------------------
    |
    | Statamic will only allow uploads of certain approved file extensions.
    | If you need to allow more file extensions, you may add them here.
    |
    */

    'additional_uploadable_extensions' => [],

    /*
    |--------------------------------------------------------------------------
    | SVG Sanitization
    |--------------------------------------------------------------------------
    |
    | Statamic will automatically sanitize SVG files when uploaded to avoid
    | potential security issues. However, if you have a valid reason for
    | disabling this, and you trust your users, you may do so here.
    |
    */

    'svg_sanitization_on_upload' => true,

];

[duncanmcclean]

Thanks!

[duncanmcclean]

Just spent some time looking into this.

• I've configured asset caching, pointing to a specific filesystem disk.
• Twitter picks up images fine from the local filesystem or from AWS S3.
• However, as soon as you use DigitalOcean Spaces, Twitter loads a card without an image.
• Interestingly, if you download one of the "broken" images from DO Spaces, delete it and re-upload it using the same filename, Twitter will pick it up.

From a Statamic perspective, the same code is being run to generate & upload images to S3 as we are on DigitalOcean Spaces, which makes me think it has something to do with DO's S3-compatible API. 🤔

[amadeann]

@duncanmcclean
Thank you for looking into this. Does the URL on AWS S3 follow the same structure? I.e. is file name + cache hash + file name? Because my hypothesis was that Twitter just gets confused with asset paths like: https://netzerocompare.com/img/containers/spaces/rare-earth-minerals.jpg/eeb3acd0207df1752a35e0afbfece7ab/rare-earth-minerals.jpg, that have 2 dots in them.

[duncanmcclean]

Yes, I tested with the same path and it wasn't an issue.

I even tried downloading and re-uploading the generated image via DigitalOcean's console (I kept the same path) and Twitter was able to render the image just fine. 🤷‍♂️

It suggests it has something to do with the DigitalOcean Spaces API, rather than an issue in Statamic or SEO Pro itself.