【Nuxt.js】 Metaタグを静的に埋め込む

ページごとに違ったMetaタグを設定するため、下記の記事を参考に設定しました

ここで問題発生！generateで作成したdist内のファイルをサーバにおいたところ、

<title>各ページのscript内で指定したtitle</title>
<meta data-n-head="ssr" data-hid="description" name="description" content="各ページのscript内で指定したdescription">

ページのソースを表示

<title>configで設定したデフォルトtitle</title>

<meta data-n-head="ssr" data-hid="description" name="description" content="configで設定したデフォルトdescription">

つまり、Nuxtがメタタグも動的に設定してしまっていることが判明。

そのため、ページをSNSなどで共有したりすると、デフォルトのタイトルやdescriptionが表示されてしまう、、、

distの中の各ページhtmlをみてみると、案の定全てのページで下記のようになっていました。

<title>configで設定したデフォルトtitle</title>

<meta data-n-head="ssr" data-hid="description" name="description" content="configで設定したデフォルトdescription">

じゃあ、generateした後、各ページのhtmlのメタタグを書き換えればいいのでは？！

->上手くいきました！！！

generateするたびに手動で1ページ1ページ書き換えるのもいいけど、自動化しちゃえ！ってことで、Pythonでコード書いたので、よかったら使ってください

まず、ページごとのtitleをまとめて管理するdeploy.yaml

path:
source: "dist"
seo:
root:
title: "このページはホームです"
description: "ホームの説明です"
page1:
title: "ページ１"
description: "ページ１の説明です"
page2:
title: "ページ2"
description: "ページ2の説明です"
page2/page3:
title: "ネストしたらこういう感じで書いてね"
description: "ページ３の説明です"

deploy.py

import yaml
import sys
import os
import re

# judge check if seo exists in yaml
def __judgeSeoParam(yml:str):
if not yml.get('seo'):
print('ERROR!!! seo param does not exist in deploy.yaml.')
sys.exit()

def __rewriteSeo(filename: str, title:str, description: str):
if os.path.exists(filename):
with open(filename, encoding='utf-8') as html:
data_lines = html.read()
data_lines = re.sub(r'(?P<top>\<title\>).+?(?P<bottom>\<\/title\>)', r'\g<top>%s\g<bottom>' % title, data_lines)
data_lines = re.sub(r'(?P<top>data\-hid\=\"description\" name\=\"description\" content=\").+?(?P<bottom>\"\>)', r'\g<top>%s\g<bottom>' % description, data_lines)

with open(filename, mode="w", encoding='utf-8') as html:
html.write(data_lines)
else:
print('ERROR!!! ' + filename + '.html does not exist.')
sys.exit()

def deploy():
print('************ start rewrite ************')

with open('deploy.yml') as file:
yml = yaml.load(file, Loader=yaml.BaseLoader)
__judgeSeoParam(yml)
for page in yml['seo']:
filename = yml['path']['source'] + '/index.html'
if page != 'root':
filename = yml['path']['source'] + '/' + page + '/index.html'
__rewriteSeo(filename, yml['seo'][page]['title'], yml['seo'][page]['description'])
print('************ end rewrite ************')

if __name__ == "__main__":
deploy()

以上ですー！

下記にコードをアップしてるので、ダウンロードもできます

github.com

明日は金曜日！

おやすみなさい

tapitapi’s blog

１日１杯タピオカ！エンジニア

【Nuxt.js】 Metaタグを静的に埋め込む