{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/docusaurus-meta-tags-and-google-discover",
  "description": "Boost your websites appearance in Google Discover with high-quality images and `max-image-preview:large` meta tag setting in Docusaurus.",
  "path": "/posts/docusaurus-meta-tags-and-google-discover",
  "publishedAt": "2021-10-18T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "docusaurus"
  ],
  "textContent": "Google Discover is a way that people can find your content. To make your content more attractive, Google encourage using high quality images which are enabled by setting the max-image-preview:large meta tag. This post shows you how to achieve that with Docusaurus.\n\n\n\nGoogle Discover\n\nI'm an Android user. Google Discover will present articles to me in various places on my phone. According to the docs:\n\n> With Discover, you can get updates for your interests, like your favorite sports team or news site, without searching for them. You can choose the types of updates you want to see in Discover in the Google app or when you’re browsing the web on your phone.\n\nIt turns out that my own content is showing up in Discover. I (ahem) discovered this by looking at the Google search console and noticing a \"Discover\" tab:\n\nAs I read up about Discover I noticed this:\n\n> To increase the likelihood of your content appearing in Discover, we recommend the following:\n> ...\n>\n> - Include compelling, high-quality images in your content, especially large images that are more likely to generate visits from Discover. Large images need to be at least 1200 px wide and enabled by the max-image-preview:large setting...\n\nI was already trying to include images with my blog posts as described... But max-image-preview:large was news to me. Reading up further revealed that the \"setting\" was simply a meta tag to be added to the HTML that looked like this:\n\nIncidentally, applying this setting will affect all forms of search results. So not just Discover, but Google web search, Google Images and Assistant as well. The result of having this meta tag will be that bigger images are displayed in search results, which should make the content more attractive.\n\nDocusaurus let's get meta\n\nNow we understand what we want (an extra meta tag on all our pages), how do we apply this to Docusaurus?\n\nWell, it's remarkably simple. There's an optional metadata property in docusaurus.config.js. This property allows you to configure additional html metadata (and override existing ones). The property is an array of Metadata, each entry of which will be directly passed to the <meta /> tag.\n\nSo in our case we'd want to pass an object with name: 'robots' and content: 'max-image-preview:large' to render our desired meta tag. Which looks like this:\n\nWith that in place, we find our expected meta tag is now part of our rendered HTML:\n\nMeta meta\n\nWe should now have a more Google Discover-friendly website which is tremendous!\n\nBefore signing off, here's a fun fact: the PR that published this blog post is the _same_ PR that added max-image-preview:standard to my blog. Peep it here - meta in so many ways 😉",
  "title": "Docusaurus, meta tags and Google Discover"
}