{"componentChunkName":"component---src-templates-blog-template-js","path":"/docs/seo-social","result":{"data":{"markdownRemark":{"html":"<p>Meta tags are an important tool for helping other people know what your store is about. These tags control the text snippets shown in search engine results, as well as the images and descriptions that are expanded on social media.</p>\n<h2>Generate your tags</h2>\n<p>The easiest way is to use a tag generator, like <a href=\"https://metatags.io/\">metatags.io</a></p>\n<p>Once you've written your meta tags, add them to the <code>&#x3C;head></code> tag in</p>\n<pre><code>├── public\n│   ├── index.html\n</code></pre>\n<p>Your tags will look like this:</p>\n<pre><code>&#x3C;!-- Primary Meta Tags -->\n&#x3C;title>Whale Hello There&#x3C;/title>\n&#x3C;meta name=\"title\" content=\"Whale Hello There\">\n&#x3C;meta name=\"description\" content=\"Custom e-commerce store that specializes\nin whale-related items.\">\n\n&#x3C;!-- Twitter -->\n&#x3C;meta property=\"twitter:card\" content=\"summary_large_image\">\n&#x3C;meta property=\"twitter:url\" content=\"https://belugajs.com/\">\n&#x3C;meta property=\"twitter:title\" content=\"Whale Hello There\">\n&#x3C;meta property=\"twitter:description\" content=\"Custom e-commerce store \nthat specializes in whale-related items.\">\n&#x3C;meta property=\"twitter:image\" content=\"https://belugajs.com/whale.jpg\">\n</code></pre>\n<p>and render like\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 416px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/de426cd50227d25857752a3e1dfd80fc/b0122/deployment3-google.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 26.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwUlEQVQY05WQ20oDMRRF5/9/qw/SSilaFR0cekW0mdxrdJwmy548FHxSDyz2ySYsSJpxHAkpEc9AqRTyZT/lXMmV8ivN50fm8Dqg1YA3J/rDF8cgOWDNUEWllD/TaPvOZLbmar7jerllMl3TrhTTxZ722fGvEWFMkZvVLU/7lrvNPfNuwcPmke6lQ5k3vPM459Ba0/c9IYR6lt1aW9MYU3uZRv7QGUf0kXRMNUUSXDhftD9kSim89xehiKSTlF6e/A2dr4Cgye/PawAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"deployment3 google\"\n        title=\"deployment3 google\"\n        src=\"/static/de426cd50227d25857752a3e1dfd80fc/b0122/deployment3-google.png\"\n        srcset=\"/static/de426cd50227d25857752a3e1dfd80fc/8ff5a/deployment3-google.png 240w,\n/static/de426cd50227d25857752a3e1dfd80fc/b0122/deployment3-google.png 416w\"\n        sizes=\"(max-width: 416px) 100vw, 416px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span>\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 547px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/20acdb9809f0271075ab328112733357/977f7/deployment3-twitter.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75.83333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsTAAALEwEAmpwYAAADeElEQVQ4y62T61MUVBiH94/oQx+q0Sb6ojUNBkGQEAnO7iIL2y7LTYRV0hwaA8da3IEgsaklkMuw6y4L7AaKwq7cwiyNZBLRKCRLQ6CUS9wXUBmRy/J0dmFqpr74oTPzm3fec2ae97zn/F4J//OSjE3PcdzWymc1bV5ZW68w4brPtGuOO4N36b15i++vXuPrS+04mlqoa3ByxnGOptY2Lly8xHcdHXR2dVH3TSdDEy4kP/bd4yn5IZ7e9T4vavTUXLjGbQFq7/yBqtp6Pi8xkn5YR4L2HRSaRCLVcV4lpu7jiC4LQ4EB+xd2wtLzae/pQ3JjYJgX4vVsis0ix9rEz7f7aLl4meo6J6bKGg5n5ZCWnkF2Xj6FRScoNxoxmkyYzWYaG510X7/KyB/9nGw4z5Wb/Uh6BfBZtY6XtceocH6F3dGM7ew5jhWVszMmjjBZFBm6bIqLSzEJkMlsocpmp7KyEkuFRUAdtH3ZRHNzIxNTMwI4OMIzsXqC0g0YTzuxOVoor65hb6YOv3A5ofIYNNr9yNUJSFUadsSokImW1YnJJKWmkazVotGoUcRq+G1gUAB/H+W53bkEHvyUstoGyqpPcfADPbIkLduV8QTKonkjSsV2mYJQaSSvh0sJihDaKSVYKidCEU2UKoa3M/T8OjS+DtycnMtL2o/Jt54mI/cTwlQJ+EsV+CtFVMTiK41mmwC/tiuGQIWSYHHTYFUsAUo1IXFJFNtrWVh1r9ump38Yn915BLxXRHqBGaVo79WISHzDZWxTaAhIeRe/xL34xaXgH59CcEIyb4ofDtEeQH7oCK3CUr39A9haznNnaATJ+NxDajpu0Nj5E5knTPi8FcmmwFCeDwplc8gOfORKtiSksjVpH1uT0/Ddk8Yr8XvYIj5MnfkhJWfrSTWUCeul8W33L0gWl5a4fL0ba70TwykH+nIrWYWl6AqKOFpYzNGiUvQl5WSbLORYqsiz2sk7aSXPaOZ4hQ1Lcxt1XT18ZG+m796fSDx93x0a5VbfoDcOj4wxOjb535laW9uI/BOF3Btv9/foefYfPFwQozbL/P0HTE27mBR+8uTTM7PMiBH0+Gt8chrX3Pz6vpAnn5px4ZqdZ9Xt9srtXhNAUfnx0jILjxZ5tPiY1X9VfJLlYXjkXtsALq+seKFLyyusrK56DzzVnlgbMA/rL2BeimEqTWU+AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"deployment3 twitter\"\n        title=\"deployment3 twitter\"\n        src=\"/static/20acdb9809f0271075ab328112733357/977f7/deployment3-twitter.png\"\n        srcset=\"/static/20acdb9809f0271075ab328112733357/8ff5a/deployment3-twitter.png 240w,\n/static/20acdb9809f0271075ab328112733357/e85cb/deployment3-twitter.png 480w,\n/static/20acdb9809f0271075ab328112733357/977f7/deployment3-twitter.png 547w\"\n        sizes=\"(max-width: 547px) 100vw, 547px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>You can specify an image to render in social media cards with the <code>:image</code> meta tag. Add the image file you want to use to your <code>public/</code> folder, and add a put an absolute path the file in your meta tag, like so:</p>\n<pre><code>&#x3C;meta property=\"twitter:image\" content=\"https://belugajs.com/whale.jpg\">\n</code></pre>","frontmatter":{"path":"/docs/seo-social","date":"2020-01-10T17:12:33.962Z","header":"Launching Your Store","title":"SEO and Social Media 💻"}}},"pageContext":{"pages":[{"path":"/docs/changelog","title":"Changelog & To Do's 📝","header":"Beluga Next Steps","date":"2020-01-11T17:12:33.962Z"},{"path":"/docs/seo-social","title":"SEO and Social Media 💻","header":"Launching Your Store","date":"2020-01-10T17:12:33.962Z"},{"path":"/docs/deploy-to-heroku","title":"Deploying To Heroku 🚀","header":"Launching Your Store","date":"2020-01-09T17:12:33.962Z"},{"path":"/docs/gmail-oauth","title":"Setting up Gmail Oauth2 📬","header":"Managing Orders","date":"2020-01-07T19:12:33.962Z"},{"path":"/docs/email-templates","title":"Email Templates 🧾","header":"Managing Orders","date":"2020-01-07T18:12:33.962Z"},{"path":"/docs/managing-orders","title":"Order Admin 📦","header":"Managing Orders","date":"2020-01-07T16:12:33.962Z"},{"path":"/docs/custom-products","title":"Advanced: Custom Product Data 💫","header":"Store Configuration","date":"2020-01-06T22:12:33.962Z"},{"path":"/docs/shipping","title":"Checkout & Shipping 🛒","header":"Store Configuration","date":"2020-01-06T21:12:33.962Z"},{"path":"/docs/additional-pages","title":"Adding Pages 📄","header":"Store Configuration","date":"2020-01-06T20:12:33.962Z"},{"path":"/docs/adding-collections","title":"Adding Collections 📂","header":"Store Configuration","date":"2020-01-06T19:12:33.962Z"},{"path":"/docs/adding-products","title":"Adding Products 🎁","header":"Store Configuration","date":"2020-01-06T18:12:33.962Z"},{"path":"/docs/theming-design","title":"Theming & Design 🎨","header":"Store Configuration","date":"2020-01-06T17:12:33.962Z"},{"path":"/docs/store-config","title":"Store Settings 🛠","header":"Store Configuration","date":"2020-01-05T16:12:33.962Z"},{"path":"/docs/stripe","title":"Setting up Stripe 💵","header":"Introduction","date":"2020-01-04T17:12:33.962Z"},{"path":"/docs/new-store","title":"Creating a New Store 🛍","header":"Introduction","date":"2020-01-03T17:12:33.962Z"},{"path":"/docs/dev-environment","title":"Setting up the Dev Environment 🧪","header":"Introduction","date":"2020-01-02T17:12:33.962Z"},{"path":"/docs/project-structure","title":"Overview of Project Structure 🏗","header":"Introduction","date":"2020-01-01T17:12:33.962Z"}]}},"staticQueryHashes":["45326706"]}