HTMLのTwitterメタタグ



HTMLのTwitterメタタグ

TwitterカードにウェブサイトのURLが正しく表示されるようにするには、パブリッシャーのハンドル、ページのタイトル、コンテンツの説明を最大200文字、クリエーターのコンテンツハンドル、および画像にする必要があります。 120x120ピクセルより大きい

HTMLのTwitter SEOメタタグ

次のメタタグを使用する必要があります。下のテンプレートはコピーして貼り付けることができます。

これはTwitterカード専用で、HTMLのメタタグはコードの頭の部分に貼り付ける必要があります:

<!-- Twitter card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@Twitter_publisher" /> <meta name="twitter:title" content="Page title" /> <meta name="twitter:description" content="Page description" /> <meta name="twitter:creator" content="@Twitter_creator" /> <!-- Twitter 280x150px image --> <meta name="twitter:image:src" content="http://www.url.com/img.jpg" />

Twitterオープングラフ

TwitterカードのメタタグやFacebookオープングラフのメタタグを含め、Twitterのウェブサイト全体の仕様を知るためには、以下の完全なコードを使用することができます。

これは、すべてのソーシャルメディアメタデータのHTMLカードを対象とし、それらのすべてであなたのURLを適切に共有できるようにします:

<!DOCTYPE html> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en" prefix="fb: http://www.facebook.com/2008/fbml"> <head> <title>60 char title</title> <meta name="description" content="200 char description" /> <!-- Twitter card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@Twitter_publisher" /> <meta name="twitter:title" content="Page title" /> <meta name="twitter:description" content="Page description" /> <meta name="twitter:creator" content="@Twitter_creator" /> <!-- Twitter 280x150px image --> <meta name="twitter:image:src" content="http://www.url.com/img.jpg" /> <!-- Open graph Facebook card --> <meta property="og:url" content="https://www.url.com/"/> <meta property="og:type" content="website/article/..."/> <meta property="og:locale" content="en-US" /> <meta property="og:site_name" content="Site name" /> <meta property="og:image" content="http://www.url.com/img.jpg" /> <meta property="og:title" content="60 char title"/> <meta property="og:description" content="Page description" /> <meta property="article:published_time" content="2018-11-06 11:32:39" /> <meta property="article:modified_time" content="2018-11-06 11:32:39" /> <meta property="article:section" content="Section" /> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="Site name"> <meta itemprop="description" content="Page description"> <meta itemprop="image" content="http://www.url.com/img.jpg">

Twitterカードのメタタグ

TwitterのメタデータがWebサイトに実装されると、それらを共有すると、タイトル、画像、説明がTwitterで正しく検索されるため、下のような外観が生成されます。

Twitterカードバリデーター

開発者向けのオンラインアプリケーションは、Twitterのウェブサイトから入手でき、リッチカードにメタタグが適切に実装されているかどうかを確認することができます。

Webページを開いて、Twitterリッチカードが表示されるURLを貼り付け、結果を表示するか、タグが誤って実装された場合の潜在的なエラーを表示するだけです。

カードバリデーターTwitter開発者

Twitter投稿画像サイズ

Twitterの投稿に投稿される画像は、少なくとも120ピクセル×120ピクセル、または120ピクセル×120ピクセル以上でなければなりません。

この最小要件を尊重して、画像が常にTwitterの投稿に正しく表示され、その画像が見栄えがよいようにしてください。

どこで飛べますか? (@wcanifly)Twitter
ヨアンビールリング(@ybierling)Twitter
ヘルプスマートフォン(@help_smartphone)Twitter
トラベルコンパレータ(@travelcomparato)| Twitter
Twitter開発者向けプラットフォーム - Twitter開発者
キエフビーチクラブと夏のキエフ夜光 - 私はどこに飛ぶことができますか?

さらなる読書

豊富なカード表示や他のソーシャルメディアの共有を目的としたメタタグを最適化するには、これらの優れたウェブサイトを参考にしてください。

ウェブ開発者のSEOチートシート2.0
すべてのWebページが2014年に持つべきメタタグ18個
オープン・グラフ・プロトコル
ビジネスのためのPinterestリッチピン
WooCommerce - 製品マークアップを追加する無料のWordpressツールキット

Twitter SEOメタタグ

Twitterカードを使用するために必要なTwitter SEOメタタグは、サイト、タイトル、説明、作成者、および画像です。

After having implemented these Twitter SEOメタタグ, sharing your website on Twitter will automatically pull these Twitter SEOメタタグ from your website to display a Twitter card.





類似の記事

5つのステップでソーシャルメディア中毒を打破する方法

5つのステップでソーシャルメディア中毒を打破する方法

私たちの脳は常に情報で満たされています。実際、20世紀のテレビの民主化以来、私たちの頭の中にあるコンテンツの量は増え続けています。スマートフォンやソーシャルメディアサイトは役に立たない。ポジティブだった何かから-ニュースを先に進めることが重要です-私たちは現在問題に直面しています。ソーシャルメディアをチェックせずに1日を過ごすことができなくなりました。私たちが以前から読んでいたアクティブコンテンツの吸収から、テレビやソーシャルメディアでの受動的な情報の吸収に飛びつきました。


コメント (0)

コメントを残す