diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3b4f5aa2..18e4a0ce 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -4,6 +4,7 @@ export default defineConfig({
   lang: 'en-US',
   title: 'VitePress',
   description: 'Vite & Vue powered static site generator.',
+  banner: './images/vite.png',
 
   head: [
     [
diff --git a/docs/index.md b/docs/index.md
index 8d8854c3..ed4fa7aa 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,5 +1,6 @@
 ---
 sidebarDepth: 2
+image: ./images/vue.png
 ---
 
 # What is VitePress?
diff --git a/docs/public/images/vite.png b/docs/public/images/vite.png
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/public/images/vue.png b/docs/public/images/vue.png
new file mode 100644
index 00000000..e69de29b
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index e5e226e3..cc0c8dc1 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -99,6 +99,7 @@ export async function renderPage(
 
   const head = addSocialTags(
     title,
+    pageData.frontmatter.image || siteData.socialImage,
     ...siteData.head,
     ...filterOutHeadDescription(pageData.frontmatter.head)
   )
@@ -220,11 +221,16 @@ function hasTag(head: HeadConfig[], tag: HeadConfig) {
   return head.some(([type, attrs]) => type === tagType && attrs[attr] === value)
 }
 
-function addSocialTags(title: string, ...head: HeadConfig[]) {
+function addSocialTags(title: string, image: string, ...head: HeadConfig[]) {
   const tags: HeadConfig[] = [
     ['meta', { name: 'twitter:title', content: title }],
     ['meta', { property: 'og:title', content: title }]
   ]
+  if (image){
+    tags.push(['meta', {name: 'twitter:image', content: image}])
+    tags.push(['meta', {property: 'og:image', content: image}])
+  }
+
   tags.filter((tagAttrs) => {
     if (!hasTag(head, tagAttrs)) head.push(tagAttrs)
   })
diff --git a/src/node/config.ts b/src/node/config.ts
index 7b337f54..439676d8 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -33,6 +33,7 @@ export interface UserConfig<ThemeConfig = any> {
   base?: string
   title?: string
   description?: string
+  socialImage?: string
   head?: HeadConfig[]
   themeConfig?: ThemeConfig
   locales?: Record<string, LocaleConfig>
@@ -239,6 +240,7 @@ export async function resolveSiteData(
     lang: userConfig.lang || 'en-US',
     title: userConfig.title || 'VitePress',
     description: userConfig.description || 'A VitePress site',
+    socialImage: userConfig.socialImage || '',
     base: userConfig.base ? userConfig.base.replace(/([^/])$/, '$1/') : '/',
     head: userConfig.head || [],
     themeConfig: userConfig.themeConfig || {},
diff --git a/types/shared.d.ts b/types/shared.d.ts
index f2af2930..422775b3 100644
--- a/types/shared.d.ts
+++ b/types/shared.d.ts
@@ -20,6 +20,7 @@ export interface SiteData<ThemeConfig = any> {
   lang: string
   title: string
   description: string
+  socialImage: string
   head: HeadConfig[]
   themeConfig: ThemeConfig
   locales: Record<string, LocaleConfig>