如何从Messenger预览中删除脚本代码？

编程问答 2022-06-09

问题描述

我在page上使用了plyr播放器。基本上，页面上唯一的代码是这样的：

<div class="container">
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player',{});
// Expose player so it can be used from the console
window.player = player;
</script>

一切正常。当我通过Messenger / whatsapp将此类链接发送给某人时，他们在预览

Text

中看到了代码，我使用了一个定制的CMS，类似于wordpress，我在帖子 body 中添加了plyr脚本代码>在HTML代码中。

注意我无法编辑或修改html中的head，只能编辑html正文中的div class =“ container”。参见网址https://zz.zustatzdravy.cz/skryte/90-test-a.html。该网址可能会在将来使用。

我不是使用WP，而是使用WP之类的东西。它是自定义的，它没有插件。我可以使用自定义CSS

有什么办法可以从预览中隐藏代码？

更新：Facebook共享调试器显示了我的意思

enter image description here

解决方法

我认为添加开放图/元描述会起作用。有关更多信息，请查看https://ogp.me/

在代码中替换{{TITLE TO SHOW IN PREVIEW}}和{{DESCRIPTION TO SHOW IN PREVIEW}}的所有实例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{TITLE TO SHOW IN PREVIEW}}</title>
  <meta name="title" content="{{TITLE TO SHOW IN PREVIEW}}">
  <meta name="description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="video.other">
  <meta property="og:title" content="{{TITLE TO SHOW IN PREVIEW}}">
  <meta property="og:description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
</head>
<body>
  <div class="container">
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
  </div>
  <script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
  <script>
  const player = new Plyr('#player',{});
  // Expose player so it can be used from the console
  window.player = player;
  </script>
</body>
</html>

此外，我建议在og:description元标记下方添加以下内容。

<meta property="og:url" content="{{ URL OF PAGE }}" />
<meta property="og:image" content="{{ PREVIEW IMAGE }}">
  • {{ URL OF PAGE }}在此情况下是当前URL ...因此，如果url为https://example.com/thevideo，则og:url的内容将为https://example.com/thevideo
  • {{ PREVIEW IMAGE }}可选的图像文件以显示为预览。这是网域的完整网址，例如https://example.com/img/preview.jpg

您可以使用Facebook Sharing Debugger工具进行测试。

您提到您正在使用CMS。您可能需要找到一个可以修改meta标头标签的插件。在WP中，您可以使用Yoast SEO之类的东西。

仅基于更新身体而更新：在您的特定情况下，CMS已经添加了og:title和og:description。 og:title是页面标题，描述是页面上文本的摘录。

使用打开的图形标签确实是您修改邮件预览中显示的标题，描述和图像的唯一方法。因此，理想的情况取决于您使用的CMS。

解决方案1：将javascript移至文件。

以下代码未添加到描述中：

<script src='https://data1.azami.cz/124141/users/plyr/plyr.min.js'></script>

因此，如果您可以使用const player = new player...代码创建另一个javascript文件，则还可以添加一个类似于以下标签：

<script src='https://data1.azami.cz/124141/users/plyr/a_new_file_with_script.js'></script>

使用解决方案1.描述现在应该为空。

解决方案2：在身体前添加描述

如果由于某种原因您不能在服务器上创建新文件，而您实际上只能修改主体，那么现在我唯一能想到的就是对其进行一些修改，从而增加新的描述但可能不会从说明中删除JavaScript代码。除非这个新说明的长度超过300个字符。

在添加视频脚本标记之前，黑客会添加以下类似的代码。查看网站时，该描述将被隐藏，但位于description标签之前。

<div style="display: none">Here you can put a description of a video. Or a general description for the website. It will be displayed as the description when sharing via messenger. Maybe if you make this 300 characters or longer,then the script won't show up in the description. This text including this note is 300 characters.</div>