diff --git a/app/code/Magento/Catalog/ViewModel/Product/Breadcrumbs.php b/app/code/Magento/Catalog/ViewModel/Product/Breadcrumbs.php
index 4c3945569db2a..871d21d8ee8d3 100644
--- a/app/code/Magento/Catalog/ViewModel/Product/Breadcrumbs.php
+++ b/app/code/Magento/Catalog/ViewModel/Product/Breadcrumbs.php
@@ -9,7 +9,9 @@
 
 use Magento\Catalog\Helper\Data;
 use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\App\ObjectManager;
 use Magento\Framework\DataObject;
+use Magento\Framework\Serialize\Serializer\Json;
 use Magento\Framework\View\Element\Block\ArgumentInterface;
 
 /**
@@ -29,18 +31,26 @@ class Breadcrumbs extends DataObject implements ArgumentInterface
      */
     private $scopeConfig;
 
+    /**
+     * @var Json
+     */
+    private $json;
+
     /**
      * @param Data $catalogData
      * @param ScopeConfigInterface $scopeConfig
+     * @param Json $json
      */
     public function __construct(
         Data $catalogData,
-        ScopeConfigInterface $scopeConfig
+        ScopeConfigInterface $scopeConfig,
+        Json $json = null
     ) {
         parent::__construct();
 
         $this->catalogData = $catalogData;
         $this->scopeConfig = $scopeConfig;
+        $this->json = $json ?: ObjectManager::getInstance()->get(Json::class);
     }
 
     /**
@@ -80,4 +90,20 @@ public function getProductName(): string
             ? $this->catalogData->getProduct()->getName()
             : '';
     }
+
+    /**
+     * Returns breadcrumb json.
+     *
+     * @return string
+     */
+    public function getJsonConfiguration()
+    {
+        return $this->json->serialize([
+            'breadcrumbs' => [
+                'categoryUrlSuffix' => $this->getCategoryUrlSuffix(),
+                'userCategoryPathInUrl' => (int)$this->isCategoryUsedInProductUrl(),
+                'product' => $this->getProductName()
+            ]
+        ]);
+    }
 }
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml
index 063f8857329e5..c54ce5340851c 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml
@@ -7,11 +7,4 @@
 /** @var \Magento\Catalog\ViewModel\Product\Breadcrumbs $viewModel */
 $viewModel = $block->getData('viewModel');
 ?>
-<div class="breadcrumbs" data-mage-init='{
-    "breadcrumbs": {
-        "categoryUrlSuffix": "<?= $block->escapeHtml($viewModel->getCategoryUrlSuffix()); ?>",
-        "useCategoryPathInUrl": <?= (int)$viewModel->isCategoryUsedInProductUrl(); ?>,
-        "product": "<?= $block->escapeHtml($block->escapeJs($viewModel->getProductName())); ?>"
-    }
-}'>
-</div>
+<div class="breadcrumbs" data-mage-init='<?= /* @escapeNotVerified */ $viewModel->getJsonConfiguration() ?>'></div>