導入

Web アプリケーションを構築する場合、URL を共有するときにソーシャル メディア プラットフォームがリンク プレビューを表示するように、リンクのコンテンツのプレビューを表示すると便利なことがよくあります。したがって、URL テキストだけでなく、URL の横に写真や説明などのOG 情報も表示できます。

この投稿では、ターゲット ページの HTML をスクレイピングするために axios と Cheerio を使用して Open Graph メタデータ (タイトル、画像、説明など) を取得しながら、React アプリにリンクを埋め込む手順を説明します。

指定された URL の Open Graph メタデータを取得して表示する、単純な EmbeddedLink コンポーネントを作成します。

前提条件

始める前に、以下がインストールされていることを確認してください:

1. React – Create React App または任意の方法を使用して React プロジェクトをセットアップします。
2. Axios – HTTP リクエストを行うため。
3. Cheerio – HTML の解析とスクレイピング用 (通常、スクレイピングに使用されるサーバー側の jQuery のようなライブラリ)。

次のコマンドを使用して Axios と Cheerio をインストールできます:

npm install axios cheerio

ステップ 1: EmbeddedLink コンポーネントの作成

URL をプロップとして取り込み、そのリンクから Open Graph メタデータをフェッチする新しい EmbeddedLink コンポーネントを作成します。これは後で使用します。完全なコードは次のとおりです:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cheerio from 'cheerio';

const EmbeddedLink = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [imageUrl, setImageUrl] = useState('');
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    useEffect(() => {
        const fetchOGData = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // Parse HTML content using Cheerio
                const $ = cheerio.load(html);
                const ogImage = $('meta[property="og:image"]').attr('content');
                const ogTitle = $('meta[property="og:title"]').attr('content');
                const ogDesc = $('meta[property="og:description"]').attr('content');

                setImageUrl(ogImage || '');
                setTitle(ogTitle || '');
                setDescription(ogDesc || '');
                setLoading(false);
            } catch (error) {
                setError(error);
                setLoading(false);
            }
        };

        fetchOGData();
    }, [url]);

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            {imageUrl && }
            
                {title && 
{title}
}
            
            {!imageUrl && !title && 
No preview available
}
            
{description}
            
{url}
        
    );
};

export default EmbeddedLink;

ステップ 2: EmbeddedLink コンポーネントの使用

次のように React アプリで EmbeddedLink コンポーネントを使用できるようになりました:

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        

            
Link Preview Example
            
    );
}

export default App;

これにより、指定された URL のプレビューが画像、タイトル、説明とともに表示されます。

エラーの処理と状態のロード

ユーザーに適切なメッセージを表示することで、潜在的なエラーと読み込み状態を処理します:

• メタデータがフェッチされている間、単純な「読み込み中...」メッセージが表示されるか、アニメーション スピナーなどを使用できます。
• フェッチ中に問題が発生した場合 (ネットワークの問題など)、エラー メッセージが表示されます。

結論

完了すると、下の図のような結果が表示されるはずです。

私はこの dev.to 埋め込みリンク スタイルを好みますが、好みに合わせてスタイルを設定できます。