Question 1

What are meta tags and why are they important?

Accepted Answer

Meta tags are HTML elements placed in the <head> section of a webpage that provide metadata about the page to browsers, search engines, and social media platforms. They control how your page appears in search results (title, description snippet) and how link previews look when shared on platforms like Facebook, Twitter, and LinkedIn. Well-written meta tags can significantly improve click-through rates from search results.

Question 2

What is the Open Graph protocol?

Accepted Answer

Open Graph (OG) is a protocol created by Facebook that lets you control how URLs are displayed when shared on social media. By adding og: meta tags — such as og:title, og:description, og:image, and og:url — you provide platforms like Facebook, LinkedIn, and Slack with the exact content to show in link previews, rather than leaving them to guess.

Question 3

What are Twitter Card meta tags?

Accepted Answer

Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) control how your content appears when shared on Twitter/X. The 'summary_large_image' card type shows a large image preview. If you also include a twitter:site tag with your @handle, Twitter links the preview back to your account.

Question 4

What image size should I use for Open Graph / social sharing?

Accepted Answer

The recommended OG image size is 1200x630 pixels (a 1.91:1 aspect ratio). This renders well on all major platforms. The file should be under 8 MB, and a JPEG or PNG is safest for compatibility. Twitter's summary_large_image card also works best with this resolution.

無料のWeb開発者向けツール

メタタグ生成（OG/Twitter）

設定

プレビュー

生成されたHTML