fix: do not escape image URLs for OG or Twitter

Author: ralphjsmit

src/Support/OpenGraphTag.php

@@ -3,20 +3,21 @@
 namespace RalphJSmit\Laravel\SEO\Support;
 
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 
 class OpenGraphTag extends Tag
 {
     public string $tag = 'meta';
 
     public function __construct(
         string $property,
-        string $content,
+        string | HtmlString $content,
     ) {
         $this->attributes['property'] = $property;
         $this->attributes['content'] = $content;
 
         $this->attributesPipeline[] = function (Collection $collection) {
-            return $collection->mapWithKeys(function ($value, $key) {
+            return $collection->mapWithKeys(function (mixed $value, string $key) {
                 if ($key === 'property') {
                     $value = 'og:' . $value;
                 }

src/Support/TwitterCardTag.php

@@ -3,20 +3,21 @@
 namespace RalphJSmit\Laravel\SEO\Support;
 
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 
 class TwitterCardTag extends Tag
 {
     public string $tag = 'meta';
 
     public function __construct(
         string $name,
-        string $content,
+        string | HtmlString $content,
     ) {
         $this->attributes['name'] = $name;
         $this->attributes['content'] = $content;
 
         $this->attributesPipeline[] = function (Collection $collection) {
-            return $collection->mapWithKeys(function ($value, $key) {
+            return $collection->mapWithKeys(function (mixed $value, string $key) {
                 if ($key === 'name') {
                     $value = 'twitter:' . $value;
                 }

src/Tags/OpenGraphTags.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 use RalphJSmit\Laravel\SEO\Support\MetaContentTag;
 use RalphJSmit\Laravel\SEO\Support\OpenGraphTag;
 use RalphJSmit\Laravel\SEO\Support\RenderableCollection;
@@ -32,7 +33,7 @@ public static function initialize(SEOData $SEOData): static
         }
 
         if ($SEOData->image) {
-            $collection->push(new OpenGraphTag('image', $SEOData->image));
+            $collection->push(new OpenGraphTag('image', new HtmlString($SEOData->image)));
 
             if ($SEOData->imageMeta) {
                 $collection

src/Tags/TwitterCard/Summary.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 use RalphJSmit\Laravel\SEO\Support\RenderableCollection;
 use RalphJSmit\Laravel\SEO\Support\SEOData;
 use RalphJSmit\Laravel\SEO\Support\TwitterCardTag;
@@ -37,7 +38,7 @@ public static function initialize(SEOData $SEOData): static
         $collection->push(new TwitterCardTag('card', 'summary'));
 
         if ($SEOData->image) {
-            $collection->push(new TwitterCardTag('image', $SEOData->image));
+            $collection->push(new TwitterCardTag('image', new HtmlString($SEOData->image)));
 
             if ($SEOData->imageMeta) {
                 $collection

src/Tags/TwitterCard/SummaryLargeImage.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Support\Collection;
+use Illuminate\Support\HtmlString;
 use RalphJSmit\Laravel\SEO\Support\RenderableCollection;
 use RalphJSmit\Laravel\SEO\Support\SEOData;
 use RalphJSmit\Laravel\SEO\Support\TwitterCardTag;
@@ -37,7 +38,7 @@ public static function initialize(SEOData $SEOData): static
         $collection->push(new TwitterCardTag('card', 'summary_large_image'));
 
         if ($SEOData->image) {
-            $collection->push(new TwitterCardTag('image', $SEOData->image));
+            $collection->push(new TwitterCardTag('image', new HtmlString($SEOData->image)));
 
             if ($SEOData->imageMeta) {
                 $collection

tests/Feature/Tags/OpenGraphTagsTest.php

@@ -153,3 +153,21 @@
     get(route('seo.test-page', ['page' => $page]))
         ->assertSee('<meta property="og:title" content="My page title - A &amp; B">', false);
 });
+
+it('will not escape the image URL query parameters', function () {
+    config()->set('seo.title.suffix', ' | Laravel SEO');
+    config()->set('seo.description.fallback', 'Fallback description');
+
+    $page = Page::create();
+
+    $page::$overrides = [
+        'title' => 'Test Page',
+        'image' => $url = 'https://website.test/images/xSVtl6ZF7fNuZIoXkZbzI2EzoAD.jpg?h=800&fit=contain&q=80&fm=webp',
+    ];
+
+    get(route('seo.test-page', ['page' => $page]))
+        ->assertSee('<meta property="og:image" content="' . $url . '">', false)
+        ->assertDontSee('<meta property="og:image:width"', false)
+        ->assertDontSee('<meta property="og:image:height"', false)
+        ->assertDontSee('twitter:site'); // We should not display an empty '@' username.
+});

tests/Feature/Tags/TwitterCardSummaryTagsTest.php

@@ -79,6 +79,27 @@
     ['summary_large_image', 'images/twitter-3597x1799.jpg', '3597', '1799'],
 ]);
 
+it('will not escape the image URL query parameters', function () {
+    config()->set('seo.title.suffix', ' | Laravel SEO');
+    config()->set('seo.description.fallback', 'Fallback description');
+
+    $page = Page::create();
+
+    $page::$overrides = [
+        'title' => 'Test Page',
+        'image' => $url = 'https://website.test/images/xSVtl6ZF7fNuZIoXkZbzI2EzoAD.jpg?h=800&fit=contain&q=80&fm=webp',
+    ];
+
+    get(route('seo.test-page', ['page' => $page]))
+        ->assertSee('<meta name="twitter:card" content="summary_large_image">', false)
+        ->assertSee('<meta name="twitter:title" content="Test Page | Laravel SEO">', false)
+        ->assertSee('<meta name="twitter:description" content="Fallback description">', false)
+        ->assertSee('<meta name="twitter:image" content="' . $url . '">', false)
+        ->assertDontSee('<meta name="twitter:image:width"', false)
+        ->assertDontSee('<meta name="twitter:image:height"', false)
+        ->assertDontSee('twitter:site'); // We should not display an empty '@' username.
+});
+
 it('will not render the Twitter Card summary_large_image for too large or small images', function (string $imagePath) {
     $page = Page::create();