トップページ -> 全ページにOpen GraphタグとTwitter Cardタグを追加しました

全ページにOpen GraphタグとTwitter Cardタグを追加しました (2024年12月14日)

変更点1．全ページにOpen Graphタグを追加しました．
変更点2. 全ページにTwitter Cardタグを追加しました．
3.変更に使ったPythonコード

1．Open Graphタグについて

Open Graphタグを設定することでFacebookなどのSNSに投稿された際に情報が表示されるようにします．以下の画像は設定前と設定後のFacebookの投稿の比較です．

設定前

設定後

【参考(外部サイト)】OGPとは？SNSでの役割や設定方法を初心者向けに解説

Open Graphタグをhead内に追加

以下のようなmetaタグをhead内に追加することでFacebookなどのSNSに投稿された際に表示される情報を設定します．一括で追加したためdescriptionは設定していません．
トップページのみはtype="website"に設定します．


<!-- Open Graph Tags -->
<meta property="og:title" content="{title}">
<meta property="og:description" content="">
<meta property="og:image" content="https://mikami3345.cloudfree.jp/icon_for_twitter.png">
<meta property="og:url" content="https://mikami3345.cloudfree.jp/{url}">
<meta property="og:type" content="article">
<meta property="og:site_name" content="mikami3345">

2．Twitter Cardタグについて

Twitter Cardタグを設定することでTwitterでURLをツイートする際にサマリーカードが表示されるようにしました．

設定後

Twitter Cardタグをhead内に追加

以下のようなmetaタグをhead内に追加することでTwitterにURLが投稿された際に表示される情報を設定します．一括で追加したためdescriptionは設定していません．


<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{title}">
<meta name="twitter:image" content="https://mikami3345.cloudfree.jp/icon_for_twitter.png">
<meta name="twitter:description" content="">

3．変更に使ったPythonコード

対象ディレクトリ内のすべてのhtmlファイルに対してheadタグ内にOpen Graphタグを追加する場合の例です．タイトルタグからページのタイトルを取得し書き換えますが，タイトルタグにIDなどが設定されている場合は正常に取得できません．(title="None"になります) ファイルを直接書き換えるコードのためバックアップを取ってから使用してください．


from pathlib import Path
import re

def extract_title_from_file(file_path):
    path = Path(file_path)

    if path.is_file():  # ファイルか確認
        try:
            with path.open("r", encoding="utf-8") as file:  # UTF-8でファイルを開く
                content = file.read()

            # <title>タグの中身を抽出（改行を含む場合に対応）
            match = re.search(r"<title\s*>\s*(.*?)\s*</title>", content, re.IGNORECASE | re.DOTALL)
            if match:
                title = match.group(1).strip()
                print(f"{file_path}: {title}")
                return title
            else:
                print(f"{file_path}: <title>タグが見つかりませんでした。")
                return None
        except Exception as e:
            print(f"ファイル {file_path} の処理中にエラーが発生しました: {e}")
            return None
    else:
        print(f"{file_path} はファイルではありません。")
        return None

def replace_string_in_file(file_path, search_string):
    path = Path(file_path)
    
    if path.is_file():  # ファイルか確認
        try:
            with path.open("r", encoding="utf-8") as file:  # UTF-8でファイルを開く
                content = file.read()
            
            # 指定文字列が含まれている場合に置換
            if content.count(search_string) == 1 and "html" in str(file_path):
                title = extract_title_from_file(file_path)
                
                relative_path = path.relative_to("homepage_new3")
                # URL形式に変換
                url = "/".join(relative_path.parts)
                
                replace_string = f"""<head>
                
<!-- Open Graph Tags -->
<meta property="og:title" content="{title}">
<meta property="og:description" content="">
<meta property="og:image" content="https://mikami3345.cloudfree.jp/icon_for_twitter.png">
<meta property="og:url" content="https://mikami3345.cloudfree.jp/{url}">
<meta property="og:type" content="article">
<meta property="og:site_name" content="mikami3345">"""
                
                updated_content = content.replace(search_string, replace_string)
                with path.open("w", encoding="utf-8") as file:  # 変更内容を書き戻す
                    file.write(updated_content)
                print(f"置換しました: {file_path}")
                
                return True
            else:
                return False
        except Exception as e:
            # print(f"ファイル {file_path} の処理中にエラーが発生しました: {e}")
            return False
    else:
        return False

# 使用例
directory = "homepage_new3"  # 対象ディレクトリ
search_string = "<head>"

# `rglob('*')` でサブディレクトリ内も含めて全ファイルを取得
for file_path in Path(directory).rglob('*'):
    if file_path.is_file():  # ファイルのみ対象にする
        replace_string_in_file(file_path, search_string)