Improve Open Graph images to use first available thumbnail

Enhanced social media sharing by updating og:image meta tags to use the first
available thumbnail (thumbnail1-4) instead of hardcoding thumbnail1. This ensures
better social media previews on Slack, Twitter, Facebook when products don't have
thumbnail1 but have other thumbnails available.

Updated templates:
- product.j2: Smart thumbnail fallback for product pages
- content.j2: Smart thumbnail fallback for content pages

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Russell Ballestrini 2025-09-28 15:06:01 -04:00
parent 6ecff9e1ef
commit fe8388bc52
2 changed files with 12 additions and 6 deletions

View file

@ -7,9 +7,12 @@
<meta name="description" content="{{ product.description }}">
<meta property="og:description" content="{{ product.description }}" />
<meta property="og:type" content="article" />
{%- if "thumbnail1" in product.extensions %}
<meta property="og:image" content="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" />
{%- endif %}
{%- for thumbnail_key in ["thumbnail1", "thumbnail2", "thumbnail3", "thumbnail4"] %}
{%- if thumbnail_key in product.extensions %}
<meta property="og:image" content="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/{{ thumbnail_key }}?ts={{ product.updated_timestamp }}" />
{%- break %}
{%- endif %}
{%- endfor %}
{% if product.has_product_file and signed_get_object_url is not none %}
<script>

View file

@ -7,9 +7,12 @@
<meta name="description" content="{{ product.description }}">
<meta property="og:description" content="{{ product.description }}" />
<meta property="og:type" content="article" />
{%- if "thumbnail1" in product.extensions %}
<meta property="og:image" content="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" />
{%- endif %}
{%- for thumbnail_key in ["thumbnail1", "thumbnail2", "thumbnail3", "thumbnail4"] %}
{%- if thumbnail_key in product.extensions %}
<meta property="og:image" content="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/{{ thumbnail_key }}?ts={{ product.updated_timestamp }}" />
{%- break %}
{%- endif %}
{%- endfor %}
{% if product.has_product_file and signed_get_object_url is not none %}
<script>