Flatsome Powered サイトに Facebook Open Graph メタデータを追加する方法

公開: 2020-12-01

ソーシャルメディアでコンテンツを共有することは、Web サイトに注目を集めるための一般的な方法です。ソーシャルメディアでコンテンツを共有しやすく、クリックしやすく、目立つようにする方法を知りたいと思うかもしれません。

Facebook があらゆる種類の Web サイトの主要なトラフィックドライバーになっていることは周知の事実です。今日では、大企業でさえ、直接ビジネスサイトではなく、Facebook ページに消費者を誘導しています。

ほぼすべての Web サイトに同様のウィジェットと推奨ウィジェットがあります。しかし、URL の共有に関して私たちが気付いた 1 つの問題は、Facebook で共有されたときにコンテンツがどのように表示されるかを制御できないことです。

Facebookが正しい情報を受け取っていない場合に発生します。場合によっては、記事が公開されたときの自動更新中に FB が正しいサムネイル画像を取得しないことがあります。

このチュートリアルでは、Flatsome を利用したサイトに Facebook Open Graph メタデータを追加する方法を紹介します。

Facebook Open Graph メタデータとは

Open Graph プロトコルは、グラフオブジェクトを作成することで、Web サイトのコンテンツを Facebook に接続します。投稿からメタデータを取得して、システムに表示します。

Open Graph プロトコルを介して、Facebook で共有コンテンツをどのように表示するかを Facebook に指示できます。このプロトコルは、共有時にページまたはブログ投稿のどのタイトル、画像、URL、および説明を使用する必要があるかを Fb に伝えます。

基本的な WordPress Open Graph タグ

多くの Open Graph プロパティがあります。ただし、Facebook がページの基本を理解するために必要なプロトコルは 4 つだけです。

1. Og: title – このタグは、ソーシャルメディアネットワークで記事のタイルを共有するために使用されます (例: 「WooCommerce Variation Swatches」)。

2. Og: 画像 – オープングラフタイトルタグは、ブログ投稿の画像をプレビューできます。内容を表しています。

3. Og: type – 共有するオブジェクトのタイプ (例: 記事、ビデオなど)

4. Og: URL – コンテンツの URL (例: https://storepress.com/woocommerce-variation-swatches/ )

Facebook オープングラフの利点

では、わざわざ Open Graph のメタデータやタグをセットアップして構成する必要はありません。

主な利点は次のとおりです。

検索によるブランドの認知度向上に役立ちます。
コンテンツの内容が一目でわかります。
ソーシャルメディアでコンテンツがどのように表示されるかを制御できます。
ソーシャルメディアフィードでコンテンツをよりキャッチーにするのに役立ちます。

Flatsome に Facebook Open Graph メタデータを追加する方法

Open Graph データを WooCommerce サイトに追加するには、手動の方法に従うか、プラグインを使用します。

方法 01: Flatsome テーマに手動で追加する

この方法では、テーマファイルを編集する必要があります。そのため、変更を加える前に、テーマファイルを必ずバックアップしてください。

その後、このコードをコピーしてfunctions.phpファイルまたはサイト固有のプラグインに貼り付けます。

//言語属性にオープングラフを追加する

関数 add_opengraph_doctype( $output ) {

$output を返します。 ' xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”';

}

add_filter('language_attributes', 'add_opengraph_doctype');

// Open Graph Meta Info を追加しましょう

関数insert_fb_in_head() {

グローバル $post;

if ( !is_singular()) //投稿でない場合 or(ページ)

戻る;

echo '<meta property=”fb:admins” content=”YOUR USER ID”/>';

echo '<meta property=”og:title” content=”' . get_the_title() . '”/>';

echo '<メタプロパティ=”og:タイプ” コンテンツ=”記事”/>';

echo '<meta property=”og:url” content=”' . get_permalink() . '”/>';

echo '<meta property=”og:site_name” content=”あなたのサイト名はこちら”/>';

if(!has_post_thumbnail( $post->ID )) { //投稿にアイキャッチ画像がなく、デフォルトの画像を使用するだけです

$default_image="http://example.com/image.jpg"; //サーバー上のデフォルトの画像または（メディアライブラリの画像）に置き換えるだけです

echo '<meta property=”og:image” content=”' . $default_image . '”/>';

}

そうしないと{

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );

echo '<meta property=”og:image” content=”' . esc_attr( $thumbnail_src[0] ) . '”/>';

}

エコー "

「;

}

add_action( 'wp_head', 'insert_fb_in_head', 5 );

注: 「Your Site Goes Here」と表示されているサイト名を変更します。デフォルトの画像 URL を自分の画像に変更します。そこにロゴ付きの画像を追加することをお勧めします。投稿にサムネイルがない場合は、ウェブサイトのロゴが表示されます。次に、独自の Facebook アプリ ID を追加します。 FB アプリがない場合は、コードから FB アプリ ID 行を削除できます。

必要な操作はこれだけです。 functions.php ファイルまたはサイト固有のプラグインを保存するとすぐに、WordPress ヘッダーに FB オープングラフメタデータの表示が開始されます。

方法 2: Yoast SEOプラグインを使用する

Yoast SEO は、Open Graph で使用する最も快適な WordPress ソーシャル共有オプションの 1 つです。最適化されたコンテンツ、サイトマップなどを作成するための優れた便利なツールです。

まず、Yoast SEO プラグインをインストールして有効にする必要があります。

そのためには、Insert Headers and Footers プラグインをインストールして有効にする必要があります。プラグインのインストール方法を学習するために、段階的に説明するチュートリアルを作成しました。

プラグインを有効にすると、左側の画面に SEO 機能が追加されます。

SEOメニューのソーシャルからFacebookタブに移動します。

次に、[Open Graph メタデータを追加] の横にあるチェックボックスを有効にします。

設定を保存するか、画面で他の Facebook ソーシャルオプションの構成を続行できます。完了したら、[変更を保存] ボタンをクリックします。

Facebook ページとインサイトを使用する場合は、Facebook アプリ ID を提供できます。さらに、ホームページの Open Graph メタタイトル、説明、および画像を変更できます。最後に、ページまたは投稿に画像が設定されていない場合に使用されるデフォルトの画像を変更できます。

Yoast SEO プラグインを使用すると、個々のページまたは投稿に Open Graph メタデータを設定することもできます。投稿またはページを編集し、エディターの下の SEO セクションまでスクロールする必要があります。

この画面から、特定のページまたは投稿の Facebook のサムネイルを設定できます。

注:投稿のタイトルまたは説明を設定しない場合、プラグインは SEO のメタタイトルと説明を使用します。

Open Graph データは、ソーシャルメディアでのプレゼンスにとって重要です。しかし、それらに多くの時間を費やす必要はありません。タグ、ソーシャルメディアのプレビューなど、基本的なことだけに集中してください。

Flatsome テーマまたは WooCommerce に関するチュートリアルがさらに必要な場合は、コメントセクションでお知らせください。次のチュートリアルを書きます。