meta og:image 不适用于我使用 SSL 的 wordpress 网站

meta og:image not working for my wordpress website using SSL

我正在尝试将元数据 属性 添加到我的 wordpress 网站并通过 SSL 认证。我将 link 发送到 Skype 和 whatsapp,og:image 无法正常工作。我尝试了很多插件,但没有插件直接 html 代码进入我的 wordpress 主题 header 但仍然无法正常工作。任何人都可以帮助我指导使用合适的插件或 wp 代码来实现这一目标。提前致谢。

my website link

<meta property="og:site_name" content="Multi-functional Online Shopping Cart | 新山网店模板设计&nbsp;" />
<meta property="og:url" content="https://mybizcart.com.my" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Home" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://mybizcart.com.my/logo.jpg" />
<meta property="og:image:secure_url" content="https://mybizcart.com.my/logo.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />

您打开的图表数据似乎工作正常 (FB sharing debugger, iframely)。

这表明 Skype 存在问题。 Skype 将其 link 元数据(包括图像)缓存在云端和您的计算机上。有说明 on the Skype forums 可以清除本地缓存,但您只需等待云缓存更新即可。

当我在 WhatsApp 对话中输入 link 时,图像按预期显示:

我怀疑 Skype 很快就会效仿,这只是一个缓存问题。我在更新元数据时遇到过类似的 Facebook 和 Twitter 帖子问题 - 根据我的经验,更改可能需要长达一周的时间才能完全传播。

对于 whatsapp 分享,您只需使用

<a href="whatsapp://send?text=https://mybizcart.com.my/url_of_page/" target="_blank"><i class="fa fa-whatsapp fa-3x" aria-hidden="true"></i><span class="hidden-xs">whatsapp</span></a>

首先,你可以在 Social Debug 上扫描你的 URL 我已经扫描了你的 URL 并发现一些问题你的排名是 C 所以试着让它成为 A.

我们也面临同样的问题,我们浪费了将近一周的时间来弄清楚某些时间缓存或服务器超时会发生什么。

不要使用插件,因为它是与您的代码输出的混搭,我们在您的 function.php 文件末尾制作了一个简单的脚本

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');

//Lets add Open Graph Meta Info

add_action('wp_head', 'fc_opengraph');
function fc_opengraph() {
if( is_single() || is_page() ) {
$post_id = get_queried_object_id();
$url = get_permalink($post_id);
    $title = get_the_title($post_id);
    $site_name = get_bloginfo('name');
$description = wp_trim_words( get_post_field('post_content', $post_id), 25 );
$image = get_the_post_thumbnail_url($post_id);
    if( !empty( get_post_meta($post_id, 'og_image', true) ) ) 
    {   
        $image = get_post_meta($post_id, 'og_image', true);
    } else {
        $image = 'set your image URl here';
    }
$locale = get_locale();
    echo '<meta name="description" content="Put your website description here">';
    echo '<meta property="og:locale" content="' . esc_attr($locale) . '" />';
    echo '<meta property="og:type" content="article" />';
    echo '<meta property="og:title" content="' . esc_attr($title) . ' | ' . esc_attr($site_name) . '" />';
    echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
    echo '<meta property="og:url" content="' . esc_url($url) . '" />';
    echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />';
if($image) echo '<meta property="og:image" content="' . esc_url($image) . '" />';
// Twitter Card
    echo '<meta name="twitter:card" content="summary" />';
    echo '<meta name="twitter:site" content="@yourtwitterhandle" />';
    echo '<meta name="twitter:creator" content="@yourtwitterhandle" />';
    echo '<meta name="twitter:title" content="' . esc_attr($title) . ' | ' . esc_attr($site_name) . '" />';
    echo '<meta name="twitter:description" content="' . esc_attr($description) . '" />';
      echo '<meta name="twitter:image" content="' . esc_attr($image) . '" />';
  }
}

好像是Skype缓存的问题,我也遇到过,我通常会在link中添加一个随机查询字符串,比如https://mybizcart.com.my/?random-1234来绕过缓存

您可以使用 yoast 插件。它为我解决了同样的问题。安装后,您可以访问其选项:Social-> Facebook,您需要在那里设置图像。设置默认图片后,您的问题将得到解决。