SEO Optimization

The website uses gatsby-plugin-react-helmet to manage SEO metadata, allowing for dynamic page titles and descriptions.

SEO metadata within gatsby-plugin-react-helmet is configured by these components:

• src/components/shared/seo/seo.jsx:
  • currentTitle: Sets the page title, using the title prop if provided, or falling back to the site title defined in gatsby-config.js.
  • currentDescription: Sets the page description, using the description prop if provided, or falling back to the site description defined in gatsby-config.js.
  • currentUrl: Sets the canonical URL, using the slug prop if provided, or defaulting to the site URL defined in gatsby-config.js.
  • currentImagePath: Sets the og:image URL, using the image prop if provided, or falling back to the site image defined in gatsby-config.js.
  • facebook: Facebook-specific meta tags for sharing.
  • twitter: Twitter-specific meta tags for sharing.

Dynamic SEO Metadata for Specific Pages:

• src/templates/blog.jsx:
  • Sets a default page title and description for all blog posts.
• src/utils/seo-metadata.js:
  • Exports a collection of SEO metadata objects (enterprise, learn, adopters, getHelp, getInvolved, tellingStory, newsletter, brand) for use on various pages.
• src/pages/brand.jsx:
  • Utilizes the brand SEO metadata object from src/utils/seo-metadata.js to set page title and description.
• src/pages/adopters.jsx:
  • Utilizes the adopters SEO metadata object from src/utils/seo-metadata.js to set page title and description.
• src/templates/labs.jsx:
  • Sets a default page title and description for all labs pages.
• src/pages/get-involved.jsx:
  • Utilizes the getInvolved SEO metadata object from src/utils/seo-metadata.js to set page title and description.
• src/pages/get-started.jsx:
  • Utilizes the learn SEO metadata object from src/utils/seo-metadata.js to set page title and description.
• src/pages/index.jsx:
  • Sets a default page title and description for the homepage.
• src/pages/enterprise.jsx:
  • Utilizes the enterprise SEO metadata object from src/utils/seo-metadata.js to set page title and description.
• src/pages/industries/telcos-datacenters.jsx:
  • Sets a page title and description based on the heroContent object within the page component.

Blog Post SEO Metadata:

• src/posts/2022-12-19-bandwidth/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2022-11-22-encryption/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2022-10-13-bbr/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2022-08-30-better-bandwidth/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2023-04-03-eu-talks/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2023-02-23-ko/index.md:
  • Defines ogSummary, categories, and tags for the blog post.
• src/posts/2024-10-04-cilium-talks-at-kubecon-na-2024/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2023-01-27-metallb/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.
• src/posts/2023-02-15-big/index.md:
  • Defines ogImage, ogSummary, categories, and tags for the blog post.

Other:

• static/_redirects:
  • Defines redirects for blog categories to ensure consistent URL structure.

Source:

• README.md

How to Use SEO Metadata:

The ogImage, ogSummary, categories, and tags fields in the blog posts are used for dynamic SEO metadata. These fields are processed by the gatsby-plugin-mdx plugin to generate the appropriate SEO metadata for each blog post. For example, the ogImage field is used to set the og:image meta tag, while the ogSummary field is used to set the og:description meta tag.

The SEO metadata objects defined in src/utils/seo-metadata.js are used to provide consistent SEO metadata for specific pages. These objects contain the page title, description, and other relevant metadata that can be easily accessed and used in the corresponding page components.

The SEO metadata is dynamically generated for each page using the gatsby-plugin-react-helmet plugin, ensuring that the website is optimized for search engines and social media sharing.

Note:

• The externalUrl field is used for external blog posts.
• The ogImageUrl field is used for the image URL of the og:image meta tag for external blog posts.

Top-Level Directory Explanations

src/ - This directory contains the source code for the Cilium project.

src/components/ - This directory contains components used in the project.

src/hooks/ - This directory contains hooks used in the project.

src/layouts/ - This directory contains the layouts used for the project’s website.

src/pages/ - This directory contains the pages for the project’s website.