shared_partial > header の記載方法変更について
2021年6月より、shared_partial > header のデフォルトの記載方法を変更しました。
(2021年6月以前の記載方法も引き続きご利用いただけます。)
以下の通り、表示の優先順位を設定しております。
上位の項目が設定されていない場合、自動的に下位の項目を表示します。
- 各ページで設定したcontent_for内の値
- 「ショップの基本設定」メタ情報
- 「ショップの基本設定」ショップの名前 ※titleタグのみ
- 空欄
※ content_forの使い方については「タイトルタグ等 meta tag を設定する方法」を参照ください。
テーマ管理のファイルパス
ec_force/shared/_header.html.liquid
ec_force/shared/_header.html+smartphone.liquid
2021年6月以前の記載方法
<!-- メタタグ -->
<meta charset="utf-8">
<meta name="description" content="{% yield meta_description %}">
<meta name="keywords" content="{% yield meta_keywords %}">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- titleタグ -->
<title>{% yield title %}</title>
<!-- 外部CSS/JSの読み込み -->
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
2021年6月以降の記載方法
{% capture yield_title %}{% yield title %}{% endcapture %}
{% capture yield_description %}{% yield meta_description %}{% endcapture %}
{% capture yield_keywords %}{% yield meta_keywords %}{% endcapture %}
{% capture yield_og_image %}{% yield og_image %}{% endcapture %}
{% capture meta_title %}
{% if yield_title == '' %}
{% if base_info.meta_title == '' %}
{{ base_info.shop_name }}
{% else %}
{{ base_info.meta_title }}
{% endif %}
{% else %}
{{ yield_title }}
{% endif %}
{% endcapture %}
{% capture meta_description %}
{% if yield_description == '' %}
{{ base_info.meta_description }}
{% else %}
{{ yield_description }}
{% endif %}
{% endcapture %}
{% capture meta_keywords %}
{% if yield_keywords == '' %}
{{ base_info.meta_keyword }}
{% else %}
{{ yield_keywords }}
{% endif %}
{% endcapture %}
{% capture og_image %}
{% if yield_og_image == '' %}
{{ base_info.sns_ogp_logo.url }}
{% else %}
{{ yield_og_image }}
{% endif %}
{% endcapture %}
<!-- メタタグ -->
<meta charset="utf-8">
<title>{{ meta_title | strip }}</title>
<meta name="description" content="{{ meta_description | strip }}">
<meta name="keywords" content="{{ meta_keywords | strip }}">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="{{ meta_title | strip }}">
<meta property="og:description" content="{{ meta_description | strip }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ og_image | strip }}">
<!-- 外部CSS/JSの読み込み -->
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>