どのように任意のウェブサイトにソーシャルメディアの共有カードを追加する

6919 ワード
webdev tutorial テキストリンク
あなたが共有したり、ウェブサイトへのリンクを受信し、それは恐ろしいプレビュー画像を持っている?
私は最近Facebookのメッセージで私のウェブサイトへのリンクを共有しました.プレビューはひどい様子だった.それはぞっとしたように見えた私のロゴの拡大したセクションでした.

私は、リンクプレビューでクールなイメージを持っている方法がある必要があります.
出て行け!Metatagsのいくつかの巧妙な使用では、あなたがウェブサイトのリンクを共有するたびに、かなりのプレビュー画像を持つことができます.
どうやってやるか.

あなたがイメージを持っていないとき、何が起こりますか
まず最初に、プレビュー画像がどのように動作するかについての背景について話しましょう.チュートリアルに直接スキップする場合は、ステップ1にスクロールします.
あなたがウェブサイトへのリンクを共有するとき、あなたのコードでMetatagsセットアップを持っていないならば、ウェブは単にデフォルトであなたの最初のイメージを共有します.多くのウェブサイトにとって、ロゴは*に現れる最初のイメージです.HTMLファイル.これは通常、ヘッダーにロゴが表示されるためです.

あなたがあなたのウェブサイトへのリンクを共有するとき、それはこのロゴをとって、プラットホーム仕様にそれを降ろします.これを越えるためには、より良いイメージにメタデータとリンクを追加する必要があります.どうやってそれをチェックしましょう.

ステップ1.画像を作成する
OK、後でこのステップを行うことができますが、私は最初にイメージを作成するのが好きです.1200 x 630 pxであるイメージが欲しいでしょう.これはFacebook、Twitter、LinkedInの最適化.

あなたのウェブサイトを公開するイメージをつくってください.画像はほとんどサムネイルとして共有されますので、あまりにも忙しくないことを確認します.私がMishManners.comウェブサイトのために作成したものは、ここにあります:

今、あなたのイメージを、時間をアップロードする必要があります.

手順2.画像のアップロード
あなたのイメージを確実にするために、あなたがリンクを共有するとき、あなたは公的に利用できるスペースでイメージを主催する必要があります.
あなたが私のようなあなたのウェブサイトをホストするためにgithubページを使用しているならば、あなたはまだ公に利用できるリンクでこのイメージをします.

How to use GitHub Pages to host your website, even with multiple repos

Michelle Mannering for GitHub ・ Aug 12 '21 ・ 4 min read

#github #tutorial #webdev

私のために、私のコードは個人的なレポでホストされます、しかし、ウェブサイトは公的です.イメージをプライベートレポにアップすれば、パブリックレルムではイメージが共有されません.
パブリックイメージをホストするには2つの方法があります.まず、画像をアップロードすることができますし、別のページであなたのウェブサイトにそれをホストします.私のイメージはhttps://mishmanners.info/webpreview.pngでホストできました.
イメージをホストするもう一つの方法は、パブリックレポでそれを持つことです.私はすべての人に利用できるようにしたいイメージをホスティングのためのrepoを持っている.私のイメージは現在https://github.com/mishmanners/PubImages/blob/main/WebsiteImages/MishMannersInfo2.pngに保存されています.
どちらの方法で行っても、画像へのパスをコピーしてください.あなたはこの次の部分のためにそれを必要とするでしょう!

ステップ3.あなたのウェブサイトにMetatagsを加えなさい
デフォルトでは、任意のメタデータなしでリンクを共有する場合、あなたのタイトルだけが表示され、あなたのウェブサイトのアドレス.代わりに、あなたが欲しいものは、簡単な説明が続くクールなイメージです.これは私がMishManners.infoウェブサイトに持っているものです.

この情報を供給するには、metatagsを*に追加します.HTMLファイル.次のコードの一部を<head>タグに追加します.
<!-- Primary Meta Tags --> <!-- this is the default metadata which all websites can draw on --> 
    <title>YOUR_WEBSITE</title>
    <meta name="title" content="YOUR_HEADING">
    <meta name="description" content="YOUR_SUMMARY">

<!-- Open Graph / Facebook --> <!-- this is what Facebook and other social websites will draw on -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="YOUR_URL">
    <meta property="og:title" content="YOUR_HEADING">
    <meta property="og:description" content="YOUR_SUMMARY">
    <meta property="og:image" content="YOUR_IMAGE_URL">

<!-- Twitter --> <!-- You can have different summary for Twitter! -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="YOUR_URL">
    <meta property="twitter:title" content="YOUR_HEADING">
    <meta property="twitter:description" content="YOUR_SUMMARY">
    <meta property="twitter:image" content="YOUR_IMAGE_URL">
ここにあなた自身の情報を加えるのを忘れないでください.また、あなたのウェブサイトのイメージパスの末尾に?raw=trueを追加することも重要です.例: https://github.com/mishmanners/PubImages/blob/main/WebsiteImages/MishMannersInfo2.png?raw=true .これはあなたのイメージが正しく表示されるようになります.

ステップ4.テストリンク
最後に、正しい情報を追加するようにあなたのウェブサイトをテストする必要があります.Metatagsは、あなたの関連のプレビューを見るすばらしい方法です.また、あなたが微調整し、あなたのメタデータを持っているすべての問題をトラブルシューティングすることができます.
それだ!今すぐあなたのリンクを共有するたびにあなたのウェブサイトのかなりのプレビューを参照してください.ここではdevのようなものがあります.

Metatagsを使用する方法、またはいくつかの楽しいコーディング冗談を楽しむ、watch my livestream where we add metadata to two of my websitesを参照してください.my live streamsのいずれかに参加して、下記のコメントで話題を提案してください.
より多くのコーディングコンテンツをもたらすことを楽しみにしています❤️
Android 8.0 SystemUI(二):プロセスの開始と初期化
答え: tolocaledatestringer ()ショートフォーマットの答え