// Before: クリックできないタグ
<span className="px-4 py-2 bg-gradient-to-r from-blue-100 via-purple-100 to-blue-100 text-blue-800 rounded-full text-sm font-bold shadow-md border border-blue-200">
  🏷️ {tag}
</span>

// After: クリック可能なタグ
<a
  href={`/tag/${tag}`}
  className="px-4 py-2 bg-gradient-to-r from-blue-100 via-purple-100 to-blue-100 text-blue-800 rounded-full text-sm font-bold shadow-md border border-blue-200 hover:from-blue-200 hover:via-purple-200 hover:to-blue-200 hover:shadow-lg transition-all"
>
  🏷️ {tag}
</a>

<nav className="mb-6" aria-label="パンくず">
  <ol className="flex items-center space-x-2 text-sm text-gray-600 mb-4">
    <li>
      <a href="/" className="text-blue-600 hover:text-blue-800 transition-colors">
        🏠 ホーム
      </a>
    </li>
    <li className="flex items-center">
      <svg className="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
      <a href={`/category/${article.category}`} className="text-blue-600 hover:text-blue-800 transition-colors">
        {article.category}
      </a>
    </li>
    <li className="flex items-center">
      <svg className="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
      <span className="text-gray-500 truncate max-w-xs" title={article.title}>
        {article.title}
      </span>
    </li>
  </ol>
</nav>

a: ({ href, children, ...props }: any) => {
  // 外部リンクの場合OGPカード表示
  if (href && href.startsWith('http')) {
    const ogpData = ogpDataMap.get(href);
    
    // リンクのテキストがURLと同じ場合はカード表示
    if (children?.toString() === href || children?.[0] === href) {
      return <OGPLinkCard url={href} ogpData={ogpData} />;
    }
    
    // 外部リンクは別タブで開く
    return (
      <a 
        href={href} 
        {...props} 
        target="_blank" 
        rel="noopener noreferrer"
        className="text-blue-600 hover:text-purple-600 font-medium underline decoration-blue-300 hover:decoration-purple-400 transition-colors"
      >
        {children}
        <span className="ml-1 text-xs">🔗</span>
      </a>
    );
  }
  
  // 内部リンク
  return (
    <a href={href} {...props} className="text-blue-600 hover:text-purple-600 font-medium underline decoration-blue-300 hover:decoration-purple-400 transition-colors">
      {children}
    </a>
  );
}

// スクロール位置の記憶
useEffect(() => {
  const scrollKey = `scroll-${article.slug}`;
  const savedPosition = sessionStorage.getItem(scrollKey);
  
  if (savedPosition) {
    // 少し遅らせてスクロール位置を復元
    setTimeout(() => {
      window.scrollTo(0, parseInt(savedPosition, 10));
    }, 100);
  }

  // ページを離れる時にスクロール位置を保存
  const handleBeforeUnload = () => {
    sessionStorage.setItem(scrollKey, window.scrollY.toString());
  };

  // 戻るボタンでの遷移を検知してスクロール位置を保存
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden') {
      sessionStorage.setItem(scrollKey, window.scrollY.toString());
    }
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  document.addEventListener('visibilitychange', handleVisibilityChange);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, [article.slug]);

// Before
🏷�E�E{tag}  // 文字化け
記事一覧に戻めE  // 文字化け
コピ�Eに失敗しました  // 文字化け

// After  
🏷️ {tag}
記事一覧に戻る
コピーに失敗しました