SEO Image Source (Global SEO)

[deeekay]

Describe the bug

I have the following settings on "Global SEO" with regards to images:

• General -> SEO Image Source: [Asset A] (Custom Image)
• Twitter -> Twitter Image Source: Same As SEO Image
• Facebook -> Facebook Image Source: Same As SEO Image

Also, I have a dynamic (not directly related to an Entry) template, where I manually set
{% do seomatic.meta.setAttributes({ "seoImage" : "[Asset B" }) %}

Expected behaviour

Expected: If I render the page like this, the Twitter and Facebook SEO images are set to "Asset B"

Actual behaviour

Expected: If I render the page like this, the Twitter and Facebook SEO images are set to "Asset A"

Now, the interesting part is: if I set General -> SEO Image Source to "Custom URL", which defaults to

{{ seomatic.helper.socialTransform([ID of Asset A], "base", 1, "crop") }}

the rendering is as expected. As soon as I change back to the actual Image, it does not work anymore.

According to my understanding, this image should serve as a fallback if no other value is defined?

Versions

• Plugin version: 4.0.31
• Craft version: 4.5.6.1

[khalwat]

Unfortunately, that's not how it works. If you put this in your template before you set the seoImage manually:

    {{ dump(seomatic.meta) }}

You'll see something like this:

nystudio107\seomatic\models\MetaGlobalVars {#1252 ▼
  +language: "en-us"
  +mainEntityOfPage: "WebPage"
  +seoTitle: "{{ seomatic.helper.extractTextFromField(entry.title) }}"
  +siteNamePosition: "before"
  +seoDescription: ""
  +seoKeywords: ""
  +seoImage: "{{ seomatic.helper.socialTransform(76, "base", 1, "crop") }}"
  +seoImageWidth: "{{ seomatic.helper.socialTransformWidth(76, "base", 1, "crop") }}"
  +seoImageHeight: "{{ seomatic.helper.socialTransformHeight(76, "base", 1, "crop") }}"
  +seoImageDescription: ""
  +canonicalUrl: "{entry.url}"
  +robots: "all"
  +ogType: "website"
  +ogTitle: "{seomatic.meta.seoTitle}"
  +ogSiteNamePosition: "none"
  +ogDescription: "{seomatic.meta.seoDescription}"
  +ogImage: "{{ seomatic.helper.socialTransform(76, "facebook", 1, "crop") }}"
  +ogImageWidth: "{{ seomatic.helper.socialTransformWidth(76, "facebook", 1, "crop") }}"
  +ogImageHeight: "{{ seomatic.helper.socialTransformHeight(76, "facebook", 1, "crop") }}"
  +ogImageDescription: "{seomatic.meta.seoImageDescription}"
  +twitterCard: "summary_large_image"
  +twitterCreator: "{seomatic.site.twitterHandle}"
  +twitterTitle: "{seomatic.meta.seoTitle}"
  +twitterSiteNamePosition: "none"
  +twitterDescription: "{seomatic.meta.seoDescription}"
  +twitterImage: "{{ seomatic.helper.socialTransform(76, seomatic.helper.twitterTransform(), 1, "crop") }}"
  +twitterImageWidth: "{{ seomatic.helper.socialTransformWidth(76, seomatic.helper.twitterTransform(), 1, "crop") }}"
  +twitterImageHeight: "{{ seomatic.helper.socialTransformHeight(76, seomatic.helper.twitterTransform(), 1, "crop") }}"
  +twitterImageDescription: "{seomatic.meta.seoImageDescription}"
  +inherited: []
  +overrides: []
  -_errors: null
  -_validators: null
  -_scenario: "default"
  -_events: []
  -_eventWildcards: []
  -_behaviors: null
}

When you change just the seoImage variable via:

{% do seomatic.meta.setAttributes({ "seoImage" : "[Asset B" }) %}

...it doesn't magically change the other settings in ogImage, twitterImage, etc. They'll still be set to what they were initially. This was done so that people can have control over the various images that are displayed on different platforms.

So the solution would be to change all 3 to what you want them to be in this custom template:

{% do seomatic.meta.setAttributes({
    "seoImage" : "[Asset B",
    "ogImage" : "[Asset B",
    "twitterImage" : "[Asset B",
}) %}

[khalwat]

I should clarify that the above only happens if you have "Transform Open Graph Image" and/or "Transform Twitter Image" on. If you turn those off, when you dump seomatic.meta as described above, you'll see this:

nystudio107\seomatic\models\MetaGlobalVars {#1094 ▼
  +language: "en-us"
  +mainEntityOfPage: "WebPage"
  +seoTitle: "{{ seomatic.helper.extractTextFromField(entry.title) }}"
  +siteNamePosition: "before"
  +seoDescription: ""
  +seoKeywords: ""
  +seoImage: "{{ seomatic.helper.socialTransform(76, "base", 1, "crop") }}"
  +seoImageWidth: "{{ seomatic.helper.socialTransformWidth(76, "base", 1, "crop") }}"
  +seoImageHeight: "{{ seomatic.helper.socialTransformHeight(76, "base", 1, "crop") }}"
  +seoImageDescription: ""
  +canonicalUrl: "{entry.url}"
  +robots: "all"
  +ogType: "website"
  +ogTitle: "{seomatic.meta.seoTitle}"
  +ogSiteNamePosition: "none"
  +ogDescription: "{seomatic.meta.seoDescription}"
  +ogImage: "{seomatic.meta.seoImage}"
  +ogImageWidth: "{seomatic.meta.seoImageWidth}"
  +ogImageHeight: "{seomatic.meta.seoImageHeight}"
  +ogImageDescription: "{seomatic.meta.seoImageDescription}"
  +twitterCard: "summary_large_image"
  +twitterCreator: "{seomatic.site.twitterHandle}"
  +twitterTitle: "{seomatic.meta.seoTitle}"
  +twitterSiteNamePosition: "none"
  +twitterDescription: "{seomatic.meta.seoDescription}"
  +twitterImage: "{seomatic.meta.seoImage}"
  +twitterImageWidth: "{seomatic.meta.seoImageWidth}"
  +twitterImageHeight: "{seomatic.meta.seoImageHeight}"
  +twitterImageDescription: "{seomatic.meta.seoImageDescription}"
  +inherited: []
  +overrides: []
  -_errors: null
  -_validators: null
  -_scenario: "default"
  -_events: []
  -_eventWildcards: []
  -_behaviors: null
}

Since they now are both set to "{seomatic.meta.seoImage}", changing the seoImage as you did above will work as you're expecting it to.

[khalwat]

Addressed in: f486961 & 63b5efd

This will turn off the Transform Image setting by default for Twitter & Facebook images, since both default to "Same as SEO Image" in the settings... and this behavior you're seeing will "just work" as you'd expect.

Craft CMS 3:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-seomatic": "dev-develop as 3.4.62”,

Then do a composer clear-cache && composer update

…..

Craft CMS 4:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-seomatic": "dev-develop-v4 as 4.0.32”,

Then do a composer clear-cache && composer update

[deeekay]

@khalwat Thanks for the clarification. I think I understand the behaviour now and can definitely find a way to make it work by the means explained.

However, I still think, the behaviour may be slightly off when switching to "Custom URL". In that case it the previously defined Image Asset A is used for seoImage but the override of seoImage in the twig template results in all three images (seoImage, ogImage and twitterImage) being overridden.

Or is that on purpose?