diff --git a/packages/create-docusaurus/templates/classic/docusaurus.config.js b/packages/create-docusaurus/templates/classic/docusaurus.config.js
index cbea7b1b4b1b..d664b65021e3 100644
--- a/packages/create-docusaurus/templates/classic/docusaurus.config.js
+++ b/packages/create-docusaurus/templates/classic/docusaurus.config.js
@@ -8,17 +8,22 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const config = {
   title: 'My Site',
   tagline: 'Dinosaurs are cool',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
   url: 'https://your-docusaurus-test-site.com',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".
@@ -56,6 +61,8 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      // Replace with your project's social card
+      image: 'img/docusaurus-social-card.jpg',
       navbar: {
         title: 'My Site',
         logo: {
diff --git a/packages/create-docusaurus/templates/facebook/docusaurus.config.js b/packages/create-docusaurus/templates/facebook/docusaurus.config.js
index c877fbcb0476..69844a2af9e1 100644
--- a/packages/create-docusaurus/templates/facebook/docusaurus.config.js
+++ b/packages/create-docusaurus/templates/facebook/docusaurus.config.js
@@ -13,17 +13,22 @@
 const config = {
   title: 'My Site',
   tagline: 'The tagline of my site',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
   url: 'https://your-docusaurus-test-site.com',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
 
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
   presets: [
     [
       'classic',
@@ -53,6 +58,7 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      image: 'img/docusaurus-social-card.jpg',
       navbar: {
         title: 'My Meta Project',
         logo: {
diff --git a/packages/create-docusaurus/templates/shared/docs/tutorial-basics/markdown-features.mdx b/packages/create-docusaurus/templates/shared/docs/tutorial-basics/markdown-features.mdx
index 6b3aaaaaaf85..0337f34d6a54 100644
--- a/packages/create-docusaurus/templates/shared/docs/tutorial-basics/markdown-features.mdx
+++ b/packages/create-docusaurus/templates/shared/docs/tutorial-basics/markdown-features.mdx
@@ -51,7 +51,11 @@ You can use absolute paths to reference images in the static directory (`static/
 
 ![Docusaurus logo](/img/docusaurus.png)
 
-You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
+You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
+
+```md
+![Docusaurus logo](./img/docusaurus.png)
+```
 
 ## Code Blocks
 
diff --git a/packages/create-docusaurus/templates/shared/static/img/docusaurus-social-card.jpg b/packages/create-docusaurus/templates/shared/static/img/docusaurus-social-card.jpg
new file mode 100644
index 000000000000..ffcb448210e1
Binary files /dev/null and b/packages/create-docusaurus/templates/shared/static/img/docusaurus-social-card.jpg differ
diff --git a/packages/docusaurus-theme-classic/src/__tests__/options.test.ts b/packages/docusaurus-theme-classic/src/__tests__/options.test.ts
index 0e9d13b08db3..69d307f7fdd3 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/options.test.ts
+++ b/packages/docusaurus-theme-classic/src/__tests__/options.test.ts
@@ -62,7 +62,7 @@ describe('themeConfig', () => {
         textColor: '#000',
         isCloseable: true,
       },
-      image: 'img/docusaurus-soc.png',
+      image: 'img/docusaurus-social-card.jpg',
       navbar: {
         style: 'primary',
         hideOnScroll: true,
diff --git a/website/docusaurus.config-blog-only.js b/website/docusaurus.config-blog-only.js
index 973aa9acfa67..62dba62c2588 100644
--- a/website/docusaurus.config-blog-only.js
+++ b/website/docusaurus.config-blog-only.js
@@ -41,7 +41,7 @@ module.exports = {
     ],
   ],
   themeConfig: {
-    image: 'img/docusaurus-soc.png',
+    image: 'img/docusaurus-social-card.jpg',
     algolia: {
       appId: 'X1Z85QJPUV',
       apiKey: 'bf7211c161e8205da2f933a02534105a',
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 501e2f648efc..71a684d69e24 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -403,7 +403,7 @@ const config = {
           },
         ],
       },
-      image: 'img/docusaurus-soc.png',
+      image: 'img/docusaurus-social-card.jpg',
       // metadata: [{name: 'twitter:card', content: 'summary'}],
       algolia: {
         appId: 'X1Z85QJPUV',
diff --git a/website/static/docusaurus-social-card.jpg b/website/static/docusaurus-social-card.jpg
new file mode 100644
index 000000000000..ffcb448210e1
Binary files /dev/null and b/website/static/docusaurus-social-card.jpg differ
diff --git a/website/static/docusaurus-social-card.png b/website/static/docusaurus-social-card.png
new file mode 100644
index 000000000000..342d7cfe8f23
Binary files /dev/null and b/website/static/docusaurus-social-card.png differ
diff --git a/website/static/img/docusaurus-soc.png b/website/static/img/docusaurus-soc.png
deleted file mode 100644
index 488173f0c366..000000000000
Binary files a/website/static/img/docusaurus-soc.png and /dev/null differ