我有一个电子商务网站，我希望能够控制用户共享我的产品描述时显示的图像。我有一个产品描述页面，其中显示了产品图像库和一个包含相关产品部分的aside元素。
但是，当用户使用iPhone共享页面时，设备会显示4张图像，这些图像来自相关产品。我希望控制使用iPhone共享时可见的图像，我希望产品的主图像可见而不是相关的产品图像。
这里是页面的HTML内容。我要在共享期间显示的图像是https://example.com/sharable-photos/1/141152923/1.jpg
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="twitter:image" property="og:image" content="https://example.com/sharable-photos/1/141152923/1.jpg" />
<meta name="twitter:image:alt"property="og:image:alt" content="..." />
<meta name="twitter:image:width" property="og:image:width" content="1200" />
<meta name="twitter:image:height" property="og:image:height" content="800" />
<meta name="twitter:title" property="og:title" content="..." />
</head>
<body itemscope itemtype="http://schema.org/ItemPage">
<div itemprop="primaryImageOfPage" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="contentUrl" content="https://example.com/sharable-photos/1/141152923/1.jpg" />
<meta itemprop="caption" content="..." />
<div itemprop="thumbnail" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="contentUrl" content="https://example.com/thumbnails/1/141152923/1.jpg" />
<meta itemprop="caption" content="..." />
</div>
</div>
<header itemprop="hasPart" itemtype="http://www.schema.org/WPHeader" itemscope id="header">...</header>
<main role="main">
<!--Product Main Content-->
<article itemprop="mainEntity" itemtype="http://schema.org/Product" itemscope itemref="similar_1 similar_2 similar_3 similar_4">
<!--Carousel Wrapper-->
<div id="carousel_thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<figure class="carousel-item active">
<picture>
<source media="(max-width: 300px)" srcset="https://example.com/thumbnails/1/141152923/1.jpg">
<source media="(min-width: 301px;) and (max-width: 767px)" srcset="https://example.com/1/141152923/1.jpg">
<source media="(min-width: 768px;) and (max-width: 991px;) 83vw" srcset="https://example.com/1/141152923/1.jpg">
<source media="(min-width: 1200px) 67vw" srcset="https://example.com/sharable-photos/1/141152923/1.jpg">
<img src="https://example.com/1/141152923/1.jpg" alt="..." class="image-cover" />
</picture>
</figure>
<figure class="carousel-item ">
<picture>
<source media="(max-width: 300px)" srcset="https://example.com/thumbnails/1/141152923/2.jpg">
<source media="(min-width: 301px;) and (max-width: 767px)" srcset="https://example.com/1/141152923/2.jpg">
<source media="(min-width: 768px;) and (max-width: 991px;) 83vw" srcset="https://example.com/1/141152923/2.jpg">
<source media="(min-width: 1200px) 67vw" srcset="https://example.com/sharable-photos/1/141152923/2.jpg">
<img src="https://example.com/1/141152923/2.jpg" alt="..." class="image-cover" />
</picture>
</figure>
<figure class="carousel-item ">
<picture>
<source media="(max-width: 300px)" srcset="https://example.com/thumbnails/1/141152923/3.jpg">
<source media="(min-width: 301px;) and (max-width: 767px)" srcset="https://example.com/1/141152923/3.jpg">
<source media="(min-width: 768px;) and (max-width: 991px;) 83vw" srcset="https://example.com/1/141152923/3.jpg">
<source media="(min-width: 1200px) 67vw" srcset="https://example.com/sharable-photos/1/141152923/3.jpg">
<img src="https://example.com/1/141152923/3.jpg" alt="..." class="image-cover" />
</picture>
</figure>
<figure class="carousel-item ">
<picture>
<source media="(max-width: 300px)" srcset="https://example.com/thumbnails/1/141152923/4.jpg">
<source media="(min-width: 301px;) and (max-width: 767px)" srcset="https://example.com/1/141152923/4.jpg">
<source media="(min-width: 768px;) and (max-width: 991px;) 83vw" srcset="https://example.com/1/141152923/4.jpg">
<source media="(min-width: 1200px) 67vw" srcset="https://example.com/sharable-photos/1/141152923/4.jpg">
<img src="https://example.com/1/141152923/4.jpg" alt="..." class="image-cover" />
</picture>
</figure>
<figure class="carousel-item ">
<picture>
<source media="(max-width: 300px)" srcset="https://example.com/thumbnails/1/141152923/5.jpg">
<source media="(min-width: 301px;) and (max-width: 767px)" srcset="https://example.com/1/141152923/5.jpg">
<source media="(min-width: 768px;) and (max-width: 991px;) 83vw" srcset="https://example.com/1/141152923/5.jpg">
<source media="(min-width: 1200px) 67vw" srcset="https://example.com/sharable-photos/1/141152923/5.jpg">
<img src="https://example.com/1/141152923/5.jpg" alt="..." class="image-cover" />
</picture>
</figure>
<!--Controls-->
<div>
<a class="carousel-control-prev" href="#carousel_thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel_thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Controls-->
</div>
<!--/.Slides-->
</div>
<!--./Carousel Wrapper-->
</article>
<!--./Product Main Content-->
<!--Related Products-->
<aside class="card">
<div class="card-header text-center text-uppercase">
<h2 class="text-info">Related Products</h2>
</div>
<div class="card-body row pt-0 pl-3 pr-3">
<!--Related Product 1-->
<div class="col-12" itemprop="isSimilarTo" itemtype="http://schema.org/Product" itemscope id="similar_1">
<div class="card bg-dark">
<picture>
<meta itemprop="image" content="https://example.com/primary-thumbnails/1/142262618/primary.jpg" />
<img intrinsicsize="250 x 175" loading="lazy" class="card-img-top" src="https://example.com/primary-thumbnails/1/142262618/primary.jpg" alt="..." title="View more info" />
</picture>
</div>
</div>
<!--./Related Product 1-->
<!--Related Product 2-->
<div class="col-12" itemprop="isSimilarTo" itemtype="http://schema.org/Product" itemscope id="similar_2">
<div class="card bg-dark">
<picture>
<meta itemprop="image" content="https://example.com/primary-thumbnails/1/142140140/primary.jpg" />
<img intrinsicsize="250 x 175" loading="lazy" class="card-img-top" src="https://example.com/primary-thumbnails/1/142140140/primary.jpg" alt="..." title="View more info" />
</picture>
</div>
</div>
<!--./Related Product 2-->
<!--Related Product 3-->
<div class="col-12" itemprop="isSimilarTo" itemtype="http://schema.org/Product" itemscope id="similar_3">
<div class="card bg-dark">
<picture>
<meta itemprop="image" content="https://example.com/primary-thumbnails/1/142140139/primary.jpg" />
<img intrinsicsize="250 x 175" loading="lazy" class="card-img-top" src="https://example.com/primary-thumbnails/1/142140139/primary.jpgg" alt="..." title="View more info" />
</picture>
</div>
</div>
<!--./Related Product 3-->
<!--Related Product 4-->
<div class="col-12" itemprop="isSimilarTo" itemtype="http://schema.org/Product" itemscope id="similar_4">
<div class="card bg-dark">
<picture>
<meta itemprop="image" content="https://example.com/primary-thumbnails/1/142140130/primary.jpg" />
<img intrinsicsize="250 x 175" loading="lazy" class="card-img-top" src="https://example.com/primary-thumbnails/1/142140130/primary.jpgg" alt="..." title="View more info" />
</picture>
</div>
</div>
<!--./Related Product 4-->
</div>
</aside>
<!--./Related Products-->
</main>
<footer itemprop="hasPart" itemscope itemtype="http://schema.org/WPFooter">...</footer>
</body>
</html>
如何控制在社交媒体上或通过移动设备共享网页时显示什么图像？
您可以使用服务器端编程语言（例如PHP）或您用于网站的任何服务器端语言，以编程方式执行此操作