Meta Tag Preview
Preview how your page looks in Google Search and social shares.
<!-- Primary Meta Tags --> <title>Stax Tools — Free Online Developer & Finance Tools</title> <meta name="title" content="Stax Tools — Free Online Developer & Finance Tools" /> <meta name="description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://stax.tools" /> <meta property="og:title" content="Stax Tools — Free Online Developer & Finance Tools" /> <meta property="og:description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." /> <meta property="og:image" content="https://stax.tools/og-image.png" /> <meta property="og:site_name" content="Stax Tools" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://stax.tools" /> <meta name="twitter:title" content="Stax Tools — Free Online Developer & Finance Tools" /> <meta name="twitter:description" content="100+ free browser-based tools — JSON formatter, EMI calculator, QR code generator, and more. No sign-up, no server, 100% private." /> <meta name="twitter:image" content="https://stax.tools/og-image.png" /> <meta name="twitter:site" content="@staxtools" />
Meta Tag Preview ツールの仕組み
meta タグプレビューツールは、Webページが Google 検索結果・Facebook シェア・Twitter カード・LinkedIn 投稿でどのように表示されるかを一つのインターフェースでレンダリングします。タイトル・説明・URL・Open Graph 画像の URL を入力して公開前に正確なプレビューを確認し、ページの head に貼り付けられる完全な HTML meta タグブロックをコピーしてください。
Google は title タグを約600ピクセル幅まで表示します。これは平均的な幅のテキスト50〜60文字に相当します。50文字未満のタイトルは短すぎてキーワードの機会を失い、60文字を超えると省略記号で切り捨てられます。プレビューはリアルタイムで切り捨てを表示します。タイトルの先頭近くに主要キーワードを含め、パイプやダッシュで区切ってブランド名を末尾に追加することを検討してください。
meta description は検索結果でタイトルと URL の下に表示されます。Google はデスクトップで約920ピクセル(約150〜160文字)、モバイルで130文字を超えると切り捨てます。meta description は直接的なランキング要因ではありませんが、魅力的な説明はクリック率を向上させます。プレビューはデスクトップとモバイルの両方の切り捨て長さを同時にレンダリングするため、両方に最適化できます。
Facebook・LinkedIn・ほとんどのソーシャルネットワークはリンクプレビュー画像に og:image meta タグを使用します。推奨サイズは1200×630px(縦横比1.91:1)で最小600×315px。Twitter の summary_large_image カードも同じ1200×630pxを推奨します。画像は HTTPS で提供され、8MB 未満である必要があります。プレビューは画像 URL を使用したリアルなソーシャルカードモックアップをレンダリングし、寸法とトリミングを確認できます。
Twitter カードには twitter:card(summary または summary_large_image に設定)・twitter:title・twitter:description・twitter:image が必要です。summary_large_image タイプはテキストの上にフル幅の画像を表示します——基本的な summary カードの小さなサムネイルよりはるかに視覚的なインパクトがあります。twitter: タグがない場合、Twitter は og: タグにフォールバックします。meta タグプレビューは両方のカードタイプをレンダリングし、選択した設定の完全なタグセットを生成します。
よくある質問
- What is an OG image?
- OG (Open Graph) image is the large preview image that appears when your URL is shared on social media like Facebook, LinkedIn, or Twitter/X. The recommended size is 1200×630 pixels (1.91:1 ratio). Without an OG image, social platforms pick any image from the page.
- What is the ideal meta title length?
- Google typically displays up to 60 characters in search results. Titles longer than 60 characters get truncated with '…'. Keep your most important keywords near the start of the title.
- What is the ideal meta description length?
- Google displays approximately 155–160 characters in search snippets. Descriptions longer than 160 characters are truncated. Include your primary keyword and a clear call to action.
- What is Twitter Card?
- Twitter Card is Twitter/X's version of Open Graph. The summary_large_image card type shows a large preview image above the tweet. Set twitter:card to summary_large_image and provide twitter:image for best visual impact.
- Do meta tags affect SEO rankings?
- Meta description does not directly affect rankings but strongly influences click-through rate in search results, which is an indirect ranking signal. Meta title is a confirmed ranking factor for Google.
関連ツール
- UTM Builder — Free UTM Link Generator with QR Code
Free UTM link builder with QR code, campaign presets, and URL history. Generate GA4-ready tracking URLs for Google Ads, Facebook, Email, LinkedIn & more — instantly, no sign-up.
- Schema Markup Generator
Generate JSON-LD schema markup for Article, Product, FAQ, and more.
- robots.txt Generator
Generate a robots.txt file with bot blocking and sitemap URL.
- XML Sitemap Generator
Create an XML sitemap with URLs, priorities, and change frequencies.
- Keyword Density Checker
Analyse keyword frequency and density for any text.