Meta Tag

Python

サイト内容を検索エンジンに伝える

templates/base.html
<meta name=”description” content=”記事の概要”><meta name=”keywords” content=”test,テスト”><meta name=”author” content=”koyama kazuto”>

Twitterカード表示用のmetaタグを追加

og:urlは記事のURL,og:imageでは画像のURLを記述する

{% block 任意の名前 %}とすることで、blockタグ内部を子テンプレートの内容にできる

templates/base.html
<meta name=”twitter:card” content=”summary_large_image”><meta name=”twitter:site” content=”@9ml_org”><meta name=”og:url” content=”{{ request.build_abluste_uri }}”><meta name=”og:title” content=”{% block ttl %}{% endblock %}”><meta name=”og:description” content=”記事の概要”><meta name=”og:image” content=”{% block image %}https://xxx.com{% endblock%}”>

子テンプレートであるdetail.htmlを編集する

block.superとすることでhttps://xxx.comのあとに/media/photos/画像URLとなる

temaplates/detail.html
{% extends ‘app/base.html’ %}{% block content %}  {% for app in apps %}    <img src=”{% block image %}{{ block.super }}{{ app.image.url }}{% endblock %}”>    <h1>{% block ttl %}{{ app.title }}{% endblock %}</h1>  {% endfor %}{% endblock %}

最後に、CardValidatorを使って変更が反映されているか確認する

上手く表示できなければ、ChromeのF12から確認する

引用文献：https://zerofromlight.com/blogs/detail/8/

ちなみに、Twitterカードは縦横比2:1

BACK