基本方針

以下URLをまるっと参考に
http://mugen00.moo.jp/web/wordpress/ogp-blogcard

ただカードのタイトルが文字化けするため、ケアを行う

// OGPの解析
blogcard
function outlink($atts) {
    extract(shortcode_atts(array(
        'addtitle' => "タイトルなし",
        'link' => "",
    ), $atts));

    require_once 'OpenGraph.php';
    $graph = OpenGraph::fetch($link);
    if ($graph) {

        $title       = $graph->title;

        //文字化け対応
        $title_check = utf8_decode($title);
        if(mb_detect_encoding($title_check) == 'UTF-8'){
            $title = $title_check; // 文字化け解消
        }

        $src         = $graph->image;
    }else{
        $title       = $addtitle;
        $src         = "noimage.jpg";
    }

    $outlink = '
    <a href="'.$link.'" target="_blank">
    <div class="card mx-auto mb-4">
    <img class="card-img-top" src="'.$src.'" alt="'.$title.'">
    <div class="card-body">
        <p class="card-text mb-0">'.$title.'</p>
    </div>
    </div>
    </a>
    ';

    return $outlink;
}
add_shortcode('o_link', 'outlink');

記述したショートコード

[o_link addtitle="ABCDEFG" link="https://www.asahi.com/articles/ASN5V7FDPN5VPIHB01P.html"]

ショートコードテスト

高さが平気パターン

全職員から10万円寄付前提でコロナ予算　兵庫・加西市：朝日新聞デジタル

高さが怪しいパターン

WordPressの投稿記事内に外部URLのOGPを取得してカードを作る

まぁ一応動いたか、スタイルは要調整のようだ
ということで調整

/* カードのイメージ高さ上限を固定*/
.card-img-top {
    width: 100%;
    max-height: 30vw;
    object-fit: cover;
}

参考

Cards