Twitter Card Sharing Configuration

Sat, 21 Mar 2026 21:56:10 +0800

I often share blog content on Twitter/X, both for pure sharing and personal promotion. Sometimes I notice that blog images don’t display correctly, and sometimes the title or content doesn’t seem appropriate. After researching, I discovered that Twitter Cards can also be configured. Below are some basic configuration items for your reference.

Configuration

 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@alanhe421">
 <meta name="twitter:creator" content="@alanhe421">
 <meta name="twitter:title" content="Article Title">
 <meta name="twitter:description" content="Article Description">
 <meta name="twitter:image" content="https://...image-url">
 <meta name="twitter:image:alt" content="Image Description">

Using my personal blog as an example, the priority order for selecting images is as follows.

twitter:image priority (high → low):

twitter[0].image (frontmatter twitter: - image:)
image.filename (frontmatter, HTTP URL)
First image in content ($first_content_image)
featured_image file (featured resources in page directory)
assets/media/sharing.png (site fallback image)

In the past, to verify if the configuration was correct, you could access the Card validator. However, this site is no longer functional. Currently, the only way is to preview directly on X when composing a tweet. You can see if it’s correct without actually publishing.

Final Result

Configuration Correct, But Not Working?

It’s a caching issue. Try sharing the link again and let X re-fetch it.

Final Thoughts

The above are some configuration and usage tips for Twitter Cards. Feel free to reference and use them. If you have better suggestions, feel free to leave comments and discuss.

Personal AI MCP Tools I Use and How to Install Them

Thu, 12 Mar 2026 14:57:25 +0800

MCP (Model Context Protocol) is a protocol that allows AI to connect to external tools and data sources. In practice, MCP is an indispensable capability extension. Here I’ve summarized the MCP tools I personally use, and provided examples of how to install and configure them in Claude Code.

Installation Methods Overview

There are two main ways to install MCP in Claude Code:

Method 1: claude mcp add Command (Recommended)

# Basic format
claude mcp add <server-name> -- <command> <args...>

# Common parameters
# -s user Global installation (available in all projects)
# -s project Project-level installation (current project only)
# -e KEY=VAL Set environment variables

Method 2: Manual Configuration File Editing

Project-level configuration is written in .mcp.json in the project root directory, and global configuration is written in the mcpServers field in ~/.claude/settings.json.

// .mcp.json example
{
 "mcpServers": {
 "server-name": {
 "command": "npx",
 "args": ["-y", "package-name"],
 "env": {
 "API_KEY": "your-key"
 }
 }
 }
}

Context7

A documentation search tool that retrieves the latest API documentation and code examples directly from official documentation libraries, avoiding outdated training data.

Installation:

claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

Use Cases: When looking up the latest documentation for any library like React, Next.js, Prisma, etc., let AI query the actual documentation instead of relying on memory.

Exa

An alternative to AI’s built-in WebFetch/WebSearch with advantages of high search quality, fast speed, and semantic search support.

Installation:

# First, register at https://exa.ai to get your API Key
claude mcp add exa -e EXA_API_KEY=your-api-key -- npx -y exa-mcp-server

Use Cases: Technical research, finding latest articles and blogs, searching domain-specific content.

Figma

Figma + Claude Code enables quick conversion of designs to code, allowing AI to directly read Figma design files and generate corresponding code with high efficiency.

Installation:

# First, get your Personal Access Token from Figma
# Figma → Settings → Personal access tokens → Generate
claude mcp add figma \
 -e FIGMA_PERSONAL_ACCESS_TOKEN=your-token \
 -- npx -y figma-developer-mcp --stdio

Use Cases: Convert Figma design files directly to frontend code, with AI reading layout, color, font, and other information from design files.

TAPD

An MCP plugin for the TAPD project management tool that allows AI to read project information such as requirements, bugs, and iterations, enabling better understanding of business context.

Installation:

# First, get your API credentials from TAPD
# TAPD → Company Management → API Applications
claude mcp add tapd \
 -e TAPD_USERNAME=your-api-id \
 -e TAPD_PASSWORD=your-api-key \
 -- npx -y tapd-mcp

Use Cases: Before development, let AI first read the requirement descriptions and acceptance criteria on TAPD for more complete business understanding during coding.

Claude in Chrome

A browser automation plugin that allows Claude Code to directly control Chrome browser for web interactions, debugging, screenshots, and other operations.

Installation:

Search and install the Claude in Chrome extension from the Chrome Web Store
After installation, the extension will automatically start the local MCP service. Add it in Claude Code:

claude mcp add claude-in-chrome -- npx -y @anthropic/claude-in-chrome-mcp

Use Cases: Combined web debugging during coding, writing web scrapers/automation scripts, testing frontend page interactions.

Chrome DevTools

Direct browser interaction through Chrome DevTools Protocol, enabling JS execution, network request capture, performance analysis, and more.

Installation:

claude mcp add chrome-devtools -- npx -y @anthropic/chrome-devtools-mcp

Use Cases: Debug frontend performance issues, analyze network requests, execute page scripts, compare screenshots.

Managing Installed MCPs

# View all installed MCPs
claude mcp list

# Remove a specific MCP
claude mcp remove <server-name>

# View detailed configuration of a specific MCP
claude mcp get <server-name>

Tips

API Key Security: Don’t commit API Keys directly in the project’s .mcp.json to Git. Instead, use -s user to install to global configuration
Install as Needed: No need to install all MCPs at once. Add them based on your actual work scenarios
Project-level vs Global: General-purpose tools (Context7, Exa, TAPD) are recommended for global installation, while project-specific tools are recommended for project-level installation

Programming Development | Attack on Life

Twitter Card Sharing Configuration

Configuration

Card Validator

Final Result

Configuration Correct, But Not Working?

Final Thoughts

Personal AI MCP Tools I Use and How to Install Them

Installation Methods Overview

Context7

Exa

Figma

TAPD

Claude in Chrome

Chrome DevTools

Managing Installed MCPs

Tips