插入图片导致搜索引擎收录错误

[iam386]

大佬，文章内容中插入图片，搜索引擎说对移动设备不友好，把图片删除后，再提交就没有这个问题，这是什么原因呢？

[n0099]

一眼google search console
您用search console的抓取工具看看googlebot移动端眼中的这个页面是什么样子有无他说的问题
或者您自己f12-mobile view看

[iam386]

google search console抓取的结果显示就是那个两个问题，对移动设备不友好，
用F12选择iphone7/8/6，667*375，看上去也没有那个问题呀
不太懂这是怎么个算法，图片的尺寸不合理？

[n0099]

网址检查-测试实际网址-查看被测试的网页-屏幕截图

[seatonjiang]

这是抓取的文章页面？还是列表页面

[iam386]

第一张就是把图片插入进去，用文本的方式查看的结果，正常的情况不是就只有一个链接地址。
第二张就是Google Console提交后抓取的结果，显示对移动设备不友好。

[n0099]

他问您google search console是对于哪个url报错

[iam386]

就是提交的新的文章内容，因为插入了图片就会这样，我图片上传前也压缩和裁剪过的。
但是我以前用其它主题就不会有这种情况。

[iam386]

没有插入图片之前不会有移动端问题。


插入图片后移动端不友好，有问题了。
所以这是什么原因呢？

[n0099]

请阁下正面回答问题：

1. 他问您google search console是对于哪个url报错
2. 网址检查-测试实际网址-查看被测试的网页-屏幕截图

[n0099]

另外针对阁下的这张图片：

对于人类用户而言图片两侧那么大的留白只会让他看不清中间的字，因而失去了聚焦要点

[iam386]

你是说要具体的url，然后用具体的url来发现错误，对吗。
我的意思是我在后台写了一篇新的文章，在文章中加入图片，发布以后，然后在Google Console测试提交收录的时候，就会报错，产生移动端设备易用性问题。
如果我把那篇文章中的图片删除，再次发布，重新提交到Google Console，就不会产生这个问题。
现在的情况是只要是新的文章加入图片，发布，在Google Console测试就会有移动端设备易用性问题，所以我没有放具体的url。
这个图片就是顺便放在文章内容中间的，没有很大意义，就像我们要写一篇介绍Reamaza的文章，然后在WordPress官网搜索了这个插件，用插件截图，然后把图片放在文章开头的介绍中，就是这么个意思。
现在的问题是，写一篇新的文章，在没有插入图片时，Google Console不会产生移动端设备易用性问题，加入了图片，Google Console就报错。

[n0099]

否，我不强迫您公开阁下的网站域是什么
以及这篇文章的url
我们目前只需要知道：

1. 您在google search console的这个页面是对于哪个url报错
   • 是文章列表页（ https://developer.wordpress.org/themes/template-files-section/post-template-files/ 中除了single.php和singular.php以外的所有template）
   • 还是文章页(single.php)
2. 在google search console中网址检查-测试实际网址-查看被测试的网页-屏幕截图
   • 同样阁下并不需要直接发上来这张截图，您只需要自己看看截图中是否存在他抱怨的问题如图片宽度超出了vw(viewport width)

[iam386]

就是我发布完的那个页面，比如domainname.com/如何使用chatgpt.html
对前端不熟悉，这个怎么看呢，屏幕截图里面只有自己的写的文章内容。
？这个

[n0099]

1. 这叫single.php
2. 截图里有没有图片超出vw（也就是google search console所抱怨的内容宽度超出了屏幕显示范围）？

[iam386]

噢噢，谢谢。
这个两个问题：内容宽度超过了屏幕显示范围，可点击元素之间的距离太近都有。
我有一点想不明白，就是把图片去掉就不会存在这个问题，
把图片缩小尺寸重新加入到内容中还会是有这个问题，其它用户有没有遇到过这种情况？

[iam386]

主要是把上次的主题切换为您这边开发的主题，Google Console后台就突然增加了好几个页面都有移动设备易用性这个问题。

[n0099]

这个两个问题：内容宽度超过了屏幕显示范围

所以我问的是

2. 截图里有没有图片超出vw（也就是google search console所抱怨的内容宽度超出了屏幕显示范围）？

但阁下一直不正面回答您在google search console抓取的截图中看到了什么

可点击元素之间的距离太近都有。

把<img>外面那层<a>删掉，这是wp编辑器从媒体库插入图片时的默认行为（增加一个指向附件页的<a>）
如果您想一劳永逸就去wp_options改image_default_link_type为none
https://wordpress.stackexchange.com/questions/327396/set-default-image-link-target-in-gutenberg-image-block
WordPress/gutenberg#10173
https://core.trac.wordpress.org/ticket/31467

您这边开发的主题

这主题不是我开发的，而是 https://github.com/seatonjiang/kratos/graphs/contributors 们开发的

[iam386]

文章的内容开头都是文字，google search console抓取的截图里面看不到文章中加入的图片，我觉得都是显示的好好的，看不出来“内容宽度超过了屏幕显示范围”这个问题。
我现在把那些去掉仍旧有那个内容宽度超出了屏幕显示范围的问题，还是得把图片删除才不会报错。

手动可以用下面

不太对，代码好像是下面这种方式。
WordPress图片附件的默认链接方式是通过参数 image_default_link_type 来定义的，类型可以是’none’，’file’，’post’三个类型，分别是无链接，链接到媒体文件(原始地址)，链接到附件页面。这个参数在主题的文件functions.php里可以设置，只需在文件里添加以下代码即可。
update_option('image_default_link_type', 'none');

那我又有一个疑问了，同样是插入图片，现在是下面这种情况

我从以前另外的一个主题的文章插入的图片使用“文本”编辑器也只有一个url啊，这又是什么原因呢？

好的，谢谢。

[iam386]

您也是其中的一名开发人员，对吗？

[n0099]

google search console抓取的截图里面看不到文章中加入的图片

是不是google无法下载该图片的url？或是他下载并显示了这图片，但保持原大小展示并且图片内容的两侧留白太大（就像您上面发的那图）导致您光看截图分不清那有没有图片？

我现在把那些去掉仍旧有那个内容宽度超出了屏幕显示范围的问题，还是得把图片删除才不会报错。

也有可能是search console看到wp区块编辑器默认添加的size-fullcss类就会报这个错
https://wordpress.org/support/topic/stopping-wordpress-from-auto-inserting-size-full-and-wp-xxx-classes/

不太对，代码好像是下面这种方式。
WordPress图片附件的默认链接方式是通过参数 image_default_link_type 来定义的，类型可以是’none’，’file’，’post’三个类型，分别是无链接，链接到媒体文件(原始地址)，链接到附件页面。这个参数在主题的文件functions.php里可以设置，只需在文件里添加以下代码即可。
update_option('image_default_link_type', 'none');

请阁下停止使用AI生成文本交流，否则我也可以使用ChatGPT的话术来回答您
首先image_default_link_type是一个wp自己在wp_options表中存储的一个全局选项，而wp_options表跟wp_post|comment|usermeta等表类似都同属Entity–attribute–value model
其次wp全局函数update_option()是对wp_options表执行一个UPDATE DML以修改您所指定的key的value，然而除非您确信有其他东西会时不时把image_default_link_type又给改成非none（或者其他您想要的值）值，否则您并没有必要每次加载functions.php这个theme entry point时都去执行一次UPDATE

我从以前另外的一个主题的文章插入的图片使用“文本”编辑器也只有一个url啊，这又是什么原因呢？

什么叫“文本”编辑器？是指基于tinymce的传统编辑器？然而他也会遵守image_default_link_type的值来决定从媒体库选择图片后是否给<img>包裹<a>，实际上古腾堡区块编辑器18年时都还不会遵守image_default_link_type的值： WordPress/gutenberg#10173

[iam386]

不是因为我的文章前面都是文字，文章比较长，图片在文章后面，google search console看不到后面图片的
误会，我没有用CHATGPT啊，我都没有注册过CHATGPT
那个是在网上找过来的解决方案。
也有可能是search console看到wp区块编辑器默认添加的size-full css类就会报这个错，这个我看了下，以前的主题，文章中插入的图片没有size-full这个参数，也会有报错。
现在插入的图片都有标签和 size-full这两个参数，而且把这两个参数去了，也会报错。
对啊，一个是“可视化编辑器”，还有一个是“文本”编辑器。
我对数据库不太熟悉，您说的比较专业，有点看不懂。
所以如何解决这个问题呢？

[seatonjiang]

https://search.google.com/test/mobile-friendly/result

在这个页面输入你的网址，然后如果出现「网页在移动设备上不易于浏览」，点进去把右侧详情截图还有里面的网页中的资源截图，以及屏幕截图都提供一下。出现这个问题的原因可能有很多，正常情况都是没问题的，但是CSS资源没加载成功或者禁止谷歌机器人的情况会出现你所描述的问题。

[iam386]

这个是我写的ROBOTS.TXT文件
User-Agent: *

Disallow: /cgi-bin/

Disallow: /wp-admin/

Allow: /?display=wide

Disallow: /readme.html

Disallow: /refer/

Disallow: /wp-content/cache

Disallow: /archives/

Disallow: /?

Disallow: *?replytocom

Disallow: /wp-*

Disallow: /author

Disallow: /comments/feed/

User-agent: Googlebot

Disallow:

User-agent: Googlebot-image

Allow: /wp-content/uploads/

User-agent: Googlebot-Mobile

Allow: /

[iam386]

后台显示的是robots.txt 已禁止 Googlebot 进行抓取

[iam386]

然后点击

出现的是这个
User-agent: *

Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/themes/

[iam386]

JavaScript 控制台消息：Uncaught ReferenceError: jQuery is not defined at

[iam386]

所以是robots.txt文件设置错误？

[n0099]

主题设置里也有一个对robots.txt的覆盖功能，您看看是不是那个在生效
建议直接curl -L example.com/robots.txt

[iam386]

我懂了，应该是主题默认的ROBOTS.TXT文件导致的，搞定啦，谢谢大佬。