如何避免URL预览显示预加载图？需展示新闻主图或机构Logo

• 我的网站使用PNG格式的预加载图（未改用GIF），之前尝试转SVG但效果不佳，最终保留了PNG格式。
• 目前存在两个问题：
  1. 分享网站主URL给他人或发布到社交平台时，URL预览显示的是预加载图，而非机构Logo
  2. 分享单条新闻、博客内容时，预览不显示对应内容的主图

当前预览效果：

预期预览效果：

问题根源 #

社交平台和聊天工具依赖页面中的<meta>标签（如Open Graph、Twitter Cards）生成预览内容，若这些标签缺失或配置错误，平台会自动抓取页面中最先出现的图片——你的预加载图大概率是页面加载时最先被解析的图片资源，因此被优先抓取作为预览图。

具体修复步骤 #

1. 配置网站首页全局预览标签 #

在页面的<head>区域添加以下Open Graph（OG）标签，指定机构Logo作为预览图：

<!-- 基础OG标签 -->
<meta property="og:title" content="你的机构名称/网站标题">
<meta property="og:type" content="website">
<meta property="og:url" content="https://adl.az/">
<meta property="og:image" content="https://adl.az/你的机构Logo完整地址.png">
<meta property="og:image:width" content="1200"> <!-- 该尺寸适配大部分平台 -->
<meta property="og:image:height" content="630">
<meta property="og:description" content="你的机构/网站的简短介绍">

<!-- 可选：添加Twitter标签优化推特等平台预览 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="你的机构名称/网站标题">
<meta name="twitter:description" content="你的机构/网站的简短介绍">
<meta name="twitter:image" content="https://adl.az/你的机构Logo完整地址.png">

2. 为新闻/博客页面配置动态预览标签 #

对于每条新闻或博客页面，需动态生成对应内容的OG标签，替换为当前内容的标题、描述和主图信息：

<!-- 内容页专属动态OG标签 -->
<meta property="og:title" content="当前新闻/博客的标题">
<meta property="og:type" content="article">
<meta property="og:url" content="当前新闻/博客的完整地址">
<meta property="og:image" content="当前新闻/博客主图的完整地址.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="当前新闻/博客的简短摘要">

<!-- Twitter平台适配标签 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="当前新闻/博客的标题">
<meta name="twitter:description" content="当前新闻/博客的简短摘要">
<meta name="twitter:image" content="当前新闻/博客主图的完整地址.png">

3. 优化预加载图加载逻辑（辅助措施） #

避免预加载图成为页面中最先被解析的图片，可尝试以下方法：

• 将预加载图的HTML代码放置到页面底部，或通过JavaScript动态加载，降低被平台爬虫优先抓取的概率
• 为预加载图添加loading="lazy"属性，实现延迟加载：

<img src="你的预加载图地址.png" alt="加载中" loading="lazy">

4. 验证配置效果 #

修改完成后，可使用各平台官方预览工具（如Facebook共享调试器、Twitter卡片验证器）检查标签配置是否生效。

内容的提问来源于stack exchange，提问作者Kamil Guliyev