メタタグ生成

書かれるタグ

ページにはタイトル、説明、正規URL、Open Graphのタグ、Xカードが必要です。このページはそれらのタグを書き、タイトルと説明の文字数を数えます。

使い方

1. タイトルと説明を埋めます。文字数は各フィールドの横にあり、入力と同時に更新されます。
2. 正規URL、画像URL、画像の代替テキスト、サイト名、og:type、og:locale、Xカード、Xサイトは任意です。og:typeの初期値はwebsiteです。Xカードの初期値はsummary_large_imageです。
3. 変換はタグを更新します。例を表示は、タイトルをAda Lovelace notes、説明をShort notes on the analytical engine, with a portrait and a canonical page、正規URLをhttps://example.com/ada、画像URLをhttps://example.com/ada.jpg、代替テキストをPortrait of Ada、サイト名をExample、og:typeをarticle、og:localeをen_US、カードをsummary_large_image、Xサイトを@exampleにします。
4. その結果には、title要素、name="description"、rel="canonical"、og:title、og:description、og:url、og:image、og:image:alt、og:site_name、og:typeのcontent="article"、og:localeのcontent="en_US"、twitter:cardのcontent="summary_large_image"、twitter:title、twitter:description、twitter:image、twitter:siteのcontent="@example"が含まれます。
5. すべてクリアはフィールドを空にし、og:typeをwebsiteに、カードをsummary_large_imageに戻します。結果をコピーはタグをコピーします。

文字数と空のフィールド

タイトルの文字数と説明の文字数は、常に表示します。60文字を超えるとタイトルの行が警告します。160文字を超えると説明の行が警告します。タグはそのまま書かれます。

空の任意フィールドは省きます。テキスト中の引用符はエスケープします。og:typeはwebsiteまたはarticleです。Xカードの値はsummaryまたはsummary_large_imageです。

使う場面

• 記事のheadタグの下書きを作る。
• 公開する前に、タイトルが60文字を超えたことを見る。
• カードをsummaryとsummary_large_imageのあいだで切り替える。

質問