ホームページのリンクをソーシャルメディアで見栄え良くする方法

ソーシャルメディアからあなたのページにリンクしたときに、人々が見るものをコントロールする方法をご紹介します...

新しいウェブサイトやブログを初めて公開したとき、すぐに友人や家族と共有したいと思うかもしれません。でも、きちんと設定しないと、つまらないリンクが表示されるだけです。

プレビューで画像が読み込まれても、見たい画像でない場合がありますが、これを修正することができます。

すべてはメタマーカーから始まる

メタタグは、ウェブページに内容を表示しないHTMLタグです。HTMLの< head> < /head>タグ内に配置される。検索エンジンやFacebookなどのサービスがあなたのページを読むとき、メタタグからターゲット情報を取り込みます。

ソーシャルメディアにおけるmetaタグの使い方とは？

メタタグは、ソーシャルメディアやSMSにリンクを正しく扱わせるために必要なものです。例えば、お客様がFacebookでリンクを共有すると、Facebookはそのリンクをたどってページを表示します。そして、そのページを読み、すべてが何であるかを調べようとする。

最も重要なのは、タイトル、説明文、画像を見つけようとすることです。もしこれらが見つからなければ、飾り気のないシンプルなリンクを表示するだけです。Facebookが特定のタイトル、説明文、画像を表示するためには、特定のメタタグを追加して、何を見るかを指示する必要があります。

FacebookやTwitterなどのソーシャルメディアサイトは、あなたのウェブサイトから必要な情報を得れば、カードを作成します。すべてが計画通りに進めば、期待通りの仕上がりになるはずです。

関連：PythonでTwitter、Instagram、Redditのボットプログラムを構築する方法

プレーンなhtmlでmetaタグを変更する

プレーンなHTMLやフロントエンドのフレームワークでウェブサイトを構築している場合、メタタグを追加するのは簡単なはずです。次の例に示すように、title、style、scriptタグと同じ領域に配置されます。

リー・ネイサン - パーソナルデベロップメントライター...

すでにいくつかのメタタグが設定されていることがわかります。これらは、あなたのサイトをリンクに正しく表示させるために必要なものではありません。これらは、いくつかの低レベルのデフォルト設定に過ぎません。

ワードプレスのメタタグを変更する

WordPressのメタタグを変更することはさらに重要です。完全なガイドを取ることになります。そのため、ここではいくつかのヒントをご紹介します。

テーマを編集していただけるのであれば、メタタグは現在のテーマファイルのtitle.phpにあるはずです。
テーマにアクセスできない場合や、テーマを扱うのが面倒な場合は、Advanced Meta Tag Managerなどのプラグインを使用してメタタグを変更することができます。

このプラットフォームでサイトを公開することに興味があるなら、最高のWordPressホスティングプロバイダーをご覧ください。

フェイスブックカードの作り方

メタタグにアクセスする方法がわかったので、編集を開始します。ここでは、Facebookが表示したい最小限のタグを示します。

titleとdescription属性は、Facebookに表示するテキストを指示します。URL属性は、特別なプロモーションやA/Bテストのためのサブページにリンクさせることができます。

image属性は完全なアドレスでなければならず、インデックスページ/ファイルセグメントからの相対的なものであってはならない。画像サイズは、ソーシャルメディアやデバイスに最も適した1200x628が最適です。

ツイッターカードの作り方

Twitterカードは、Facebookカードとほぼ同じですが、メタタグが異なります。Twitterのmetaタグはこんな感じです。

titleとdescription属性はFacebookと同じで、image属性も同じルールに従います。

主な違いは、カードの特性にあります。この例では、"summariau largeu image "を使って、Facebookカードとほぼ同じ外観のカードを作成しています。しかし、Twitterには他の選択肢もあります。

プレビューを正しく表示させる方法

カードが揃うまで、ツイートを投稿してすぐに削除することを6回繰り返すことができます。また、自分自身にFacebookのメッセージを送ることもできます。しかし、これらの方法は少し不格好です。幸いなことに、どちらのサービスでも、カードの確認を簡単にする便利なツールを提供しています。

Facebookには共有デバッガが、Twitterにはカードバリデータがあります。どちらのツールも、リンクがどのように機能するかを確認するためのもので、ただ名前が違うだけです。

その他、テストしていただきたい箇所

これで、あなたのウェブサイトのリンクは、2つの主要なソーシャルネットワーク上で素晴らしく見えるようになりました。ほとんどの場合、どこにでも似合いますが、似合うかどうかは再確認した方がいいでしょう。例えば、画像の下部や上部に情報がある場合、モバイル端末で編集される可能性があります。

ムーバブル

研究を進める前に、リンクが**で問題なく見えることを確認するのが一番です。前述したように、画像は小さい画面に収まるように編集されることがあります。先ほどの例の画像は低すぎて、ヘッダーの上半分しか見えていません。

SMS、メッセンジャー

リンクを貼ったテキストを自分宛に送る（またはWhatsAppなどのサービスでメッセージを送る）だけで、簡単に利用することができます。バリデーションツールを気にする必要はありません。ほとんどの場合、ソーシャルメディアアプリで映えるなら、ここでも映えるはずです。

コリングウッド

個人のウェブサイトで仕事をしている場合、LinkedInで見栄えを良くしたいのは間違いありません。幸いなことに、LinkedInにはポストインスペクターという検証ツールも用意されています。また、LinkedInはFacebookのタグを使うので、メタタグを増やす心配はありません。

次にやるべきこと

ご紹介した内容で十分だと思います。しかし、もっと詳しく知りたい場合は、FacebookのハッシュタグガイドやTwitterのハッシュタグページをチェックしてみてください。

2021-03-30 08:46 に公開
閲覧 ( 37 )
分類：プログラミング