Skip to content

Add Social Media Metadata

Prompt

Add yml metadata to the @docs/sims/projecting-ai/index.md Include the title, description and image for social media open graph previews using projecting-ai.png in that folder.
Also put the metadata in the main.html but using standardized header metadata tags.

Session Log: Add Social Media Metadata

Date

2025-11-16

Prompt

User requested: "add yml metadata to the @docs/sims/projecting-ai/index.md and include the image for social media preview using projecting-ai.png in that folder. Also put the metadata in the main.html but using header metadata tags"

Actions Taken

1. Updated index.md with YAML Frontmatter

Added YAML metadata to the top of /docs/sims/projecting-ai/index.md:

1
2
3
4
5
---
title: Projecting AI Task Completion to 2030
description: Interactive visualization showing exponential growth of AI task completion capabilities from 2019 to 2030, with time on the horizontal axis and projected horizons based on 7-month doubling time
image: ./projecting-ai.png
---

Note: User subsequently updated the image paths to: 

1
2
image: /sims/projecting-ai/projecting-ai.png
og:image: /sims/projecting-ai/projecting-ai.png

2. Updated main.html with HTML Meta Tags

Added comprehensive metadata tags to the <head> section of /docs/sims/projecting-ai/main.html:

Standard Meta Tags

1
2
<meta name="description" content="Interactive visualization showing exponential growth of AI task completion capabilities from 2019 to 2030, with time on the horizontal axis and projected horizons based on 7-month doubling time">
<meta name="author" content="Dan McCreary">

Open Graph Tags (Facebook)

1
2
3
4
5
6
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dmccreary.github.io/tracking-ai-course/sims/projecting-ai/main.html">
<meta property="og:title" content="Projecting AI Task Completion to 2030">
<meta property="og:description" content="Interactive visualization showing exponential growth of AI task completion capabilities from 2019 to 2030, with time on the horizontal axis and projected horizons based on 7-month doubling time">
<meta property="og:image" content="https://dmccreary.github.io/tracking-ai-course/sims/projecting-ai/projecting-ai.png">

Twitter Card Tags

1
2
3
4
5
6
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://dmccreary.github.io/tracking-ai-course/sims/projecting-ai/main.html">
<meta property="twitter:title" content="Projecting AI Task Completion to 2030">
<meta property="twitter:description" content="Interactive visualization showing exponential growth of AI task completion capabilities from 2019 to 2030, with time on the horizontal axis and projected horizons based on 7-month doubling time">
<meta property="twitter:image" content="https://dmccreary.github.io/tracking-ai-course/sims/projecting-ai/projecting-ai.png">

3. Additional User Edits

The user also made the following changes: - Updated the subtitle in main.html to include "(METR.org)" attribution - Added a "Return to Documentation" link at the bottom of main.html - Updated image paths in index.md to use absolute paths from site root

Files Modified

  1. /Users/dan/Documents/ws/tracking-ai-course/docs/sims/projecting-ai/index.md
  2. /Users/dan/Documents/ws/tracking-ai-course/docs/sims/projecting-ai/main.html

Outcome

Both files now have proper metadata for social media sharing: - index.md: YAML frontmatter for MkDocs Material theme's social plugin - main.html: Standard HTML meta tags including Open Graph and Twitter Card tags

Both files reference projecting-ai.png as the social media preview image, which needs to be created by the user.

Notes

  • The metadata follows best practices for social media sharing
  • Open Graph tags work for Facebook, LinkedIn, and other platforms
  • Twitter Card tags optimize for Twitter/X sharing
  • The image reference assumes projecting-ai.png will be created in the same directory