如何使用 Yoast 向站点添加第二个 Open Graph 图像？答案

【问题标题】：How can I add a second Open Graph image to a site using Yoast?如何使用 Yoast 向站点添加第二个 Open Graph 图像？
【发布时间】：2019-08-16 05:10:09
【问题描述】：

我想向我的 Wordpress 网站添加第二张打开的图形图像（正方形）以供 WhatsApp 使用。 WhatsApp 选择最后一张图像并将其裁剪为 1 x 1.3 的纵向纵横比，然后以 80 x 104 像素显示，这不适用于第一个打开的图形图像，其大小为 1.91 比 1 横向纵横比用于 Facebook（和 LinkedIn）。

通过 Yoast SEO 插件，我添加了一个 1200 x 630 的图像，供 Facebook 和 LinkedIn 等网站使用（并且该图像显示了一组完整的 og 元标记）。该图像还用于消息传递应用程序的链接预览。我已经使用 Social - Yoast SEO 下的 Facebook 选项卡添加了图像。

我找不到任何函数来使用 Yoast 定义第二张打开的图形图像。

我确实尝试将几年前的教程中的一些代码添加到functions.php，但它所做的只是用一张图片的链接替换现有的og数据：

add_action( 'wpseo_opengraph', 'change_yoast_seo_og_meta' );
/**
* Function to add hooks and filter out the Yoast SEO Open Graph Meta Tags
*/

function change_yoast_seo_og_meta() {
  add_action( 'wpseo_add_opengraph_images', 'add_images' );
}

function add_images( $object ) {
  $image = 'http://url_to_our_image.png';

  $object->add_image( $image );
}

我不认为 Yoast 直接支持第二张图片，但是有没有办法使用 functions.php 添加第二张图片（使用 op:image, og:image:secure_url, og:image:height, og: image:width 和 og:image:alt 元字段）？我不需要以编程方式完成图像数据，因为我会为每个页面使用相同的图像，因此可以将信息硬编码到 functions.php 中。

谢谢

【问题讨论】：

标签： php wordpress yoast

【解决方案1】：

是的，这是可能的。

默认情况下，Yoast 会使用您使用 wpseo_add_opengraph_images 挂钩添加的图像覆盖默认图像。因此，您可以从WPSEO_Options 类中获取默认图像并先添加它，然后再添加您的辅助图像。

add_action( 'wpseo_add_opengraph_images', 'add_images' );

function add_images( $object ) {  
  $default_image_url = WPSEO_Options::get('og_default_image', '');  

  if( $default_image_url !== '' ) {
    $default_image = array( 'url' => $default_image_url, 'height' => 100, 'width' => 200 );
    $object->add_image( $default_image );
  }

  $secondary_image = array( 'url' => 'https://exampledomain.com/images/secondary-image.jpg', 'height' => 100, 'width' => 200 );
  $object->add_image( $secondary_image );
}

谢谢。

【讨论】：

感谢您的回答。该代码确实给了我两个图像，尽管它没有 og:image:width / height 字段。如果我遇到困难，我会调查并发布。
您可以只传递一个包含图像宽度和高度的数组，该数组将显示og:image:width/height 字段。我已经编辑了上面的代码。
这在 Yoast 14.0 之后不再起作用所有这些过滤器和功能已被弃用:(
@JuanSolano – 我已经修改了 gjzim 提供的代码，以便与 Yoast 的新过滤器架构配合使用。

【解决方案2】：

正如 Juan Solano 在他的评论中指出的那样，Yoast 已经贬低了以前用于添加内容的过滤器（例如第二张 OG 图像），并修改了他们的架构以在版本 14 中使用 Abstract_Indexable_Presenter 类。

我已经修改了 gjzim 的代码以添加第二个 OG 图像，基于 Polylang 如何更改他们的代码以配合 Yoast 的更新：

// Add a second OG image (a square one for WhatsApp)
use Yoast\WP\SEO\Presenters\Abstract_Indexable_Presenter;

class Second_OG_Image_Presenter extends Abstract_Indexable_Presenter {
    public function present() {
        $images = $this->get();

        if ( empty( $images ) ) {
            return '';
        }

        $return = '';
        $return .= '<meta property="og:image" content="' . esc_url( $images['url'] ) . '" />';
        $return .= \PHP_EOL . "\t" . '<meta property="og:image:width" content="' . $images['width'] . '"/>';
        $return .= \PHP_EOL . "\t" . '<meta property="og:image:height" content="' . $images['height'] . '"/>';

        return $return;
    }

    public function get() {
        $images = ['width' => 400,
                   'height' => 400,
                   'url' => esc_url('https://example.com/wp-content/uploads/2019/08/Open-Graph-Sq.png')
                  ];

        return $images;
    }
}


function add_second_og_image( $presenters ) {
    $_presenters = array();

    foreach ( $presenters as $presenter ) {
        $_presenters[] = $presenter;
        if ( $presenter instanceof Yoast\WP\SEO\Presenters\Open_Graph\Image_Presenter ) {
            $_presenters[] = new Second_OG_Image_Presenter();
        }
    }
    return $_presenters;
}

add_filter( 'wpseo_frontend_presenters', 'add_second_og_image' );`

【讨论】：