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

Question

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

通过 Yoast SEO 插件，我添加了一张 1200 x 630 的图片供 Facebook 和 LinkedIn 等网站使用（图片显示时带有一整套 og 元标记）。该图像还用于消息传递应用程序的 link 预览。我使用 Social - Yoast SEO 下的 Facebook 选项卡添加了图像。

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

我确实尝试将一些代码从几年前的教程添加到 functions.php，但它所做的只是用 link 替换现有的 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.

谢谢

Answer 1

是的，这是可能的。

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

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 );
}

谢谢。

Answer 2

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

我修改了 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' );`

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

How can I add a second Open Graph image to a site using Yoast?

php

wordpress

yoast