SmartHR Design System

メタ情報

サービスSmartHRのウェブサイトの基本情報であるメタ情報についてまとめています。そのなかで下記の項目のメタ情報をまとめた実装例を紹介します。それぞれの詳細についてリンク先のページを参照してください。

またサービスではなくコーポレート（株式会社SmartHR）のウェブサイトのメタ情報に関しては、SmartHR Design System コーポレート版 | DocBaseを参照してください。

利用ガイドライン

  • ここで紹介するのはあくまで推奨している実装例になりますので、施策に合わせたコードや設定、アイコン画像の調整などは適宜検討してください。
  • 画像ファイルはSmartHRが運営する、ウェブを利用した各種タッチポイントとして設定してください。
  • メタ情報以外のタッチポイント（各種ツールのアイコン等）では使用しないでください。
  • 本ページで用意している画像ファイルを基本のデザインとし、各種ウェブサイトでの積極的な利用を推奨しますが、必須ではありません。

実装例

具体的な実装例を紹介します。タイトルやURL・パスなどは、実際の実装に合わせて適宜変更してください。

1. コードをheadタグ内に記述する

下記のコードをheadタグ内に記述します。

コミュニケーションのコード例

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="apple-mobile-web-app-title" content="SmartHR">
<meta name="application-name" content="SmartHR">
<meta property="og:title" content="{ページ名} | SmartHR（スマートHR）">
<meta property="og:type" content="website">
<meta property="og:url" content="{url}">
<meta property="og:image" content="{url}/ogp.png">
<meta property="og:site_name" content="SmartHR（スマートHR）">
<meta property="og:description" content="SmartHRは、人事・労務の業務効率化からタレントマネジメントまで、働くすべての人の生産性向上を支える、「クラウド人事労務ソフト」です。">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="{app_id}">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@smarthr_jp">
<meta name="twitter:title" content="{ページ名} | SmartHR（スマートHR）">
<meta name="twitter:description" content="SmartHRは、人事・労務の業務効率化からタレントマネジメントまで、働くすべての人の生産性向上を支える、「クラウド人事労務ソフト」です。">
補足

特に理由がなければ、og:descriptionは<meta name="description">のcontentと同じ内容にすることを推奨します。

プロダクトのコード例

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="apple-mobile-web-app-title" content="SmartHR">
<meta name="application-name" content="SmartHR">
補足

プロダクトはログインが必要となる画面が多く、OGPを考慮する必要がないため、OGPの設定を省略した例としています。

プロダクトのURLをOGPを反映するアプリケーション（社内Slackなど）に貼り付けた際は、（公開されている）ログインページのOGPの情報が展開されるため、ログインページにはコミュニケーションの例を参考にOGPを設定することを推奨します。

2. ファビコンやアイコンのファイルを配置する

ファイルセットのダウンロードからZIPファイルをダウンロードします。この実装例では、各ファイルはサイトルートに配置しますが、実際の実装では施策に合わせて適宜ファイル名やパスを変更してください。

解凍したファイルの中に_readme.txtが含まれますが、このファイルは配置する必要はありませんので内容を確認したら削除しておいてください。他にも実際の実装に不要なファイルがあれば削除しておいてください。

manifest.webmanifestにもアイコンやタイトルの情報が含まれています。これも実際の実装に合わせて適宜変更してください。

{
  "name": "SmartHR（スマートHR）",
  "short_name": "SmartHR",
  //...
}

ダウンロード

ファビコンやアイコン、マニフェストなどのファイルをまとめたZIPファイルを下記からダウンロードできます。

サイトにアクセスするすべての人が参照できますが、利用に関しては利用者・利用範囲を確認してください。

利用者・利用範囲

サイトにアクセスするすべての人が参照できますが、利用には一部制限があります。 ファビコンの利用者と利用範囲は以下のとおりです。

利用者名義利用可否
SmartHR従業員サービスSmartHR
株式会社SmartHR		◯ 利用できます
SmartHR従業員SmartHR Plus◯ 利用できます
SmartHR従業員SmartHRグループ会社と
その提供サービス		× 利用できません
SmartHR外部パートナーサービスSmartHR
株式会社SmartHR		◯ 利用できます
SmartHR PlusパートナーSmartHR Plusパートナーが
提供するアプリ		× 利用できません
SmartHRグループ会社
従業員		SmartHRグループ会社と
その提供サービス		× 利用できません
すべてのかた
広報担当者のかた		SmartHRの広報活動× 利用できません

ほかのコンテンツの利用範囲は利用者のかたへを参照してください。

フィードバック先

メタ情報に関する相談・フィードバック