[{"data":1,"prerenderedAt":30},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Ffeatures\u002Fseo":3},{"html":4,"toc":5,"description":26,"hero":27,"list":28,"socialImage":29},"\u003Ch1 id=\"seo\">SEO\u003C\u002Fh1>\n\u003Cp>Clay prepares every page for search engines and link previews on its own. Each page is pre-rendered to complete HTML, so crawlers see the full content without running JavaScript.\u003C\u002Fp>\n\u003Ch2 id=\"what-every-page-gets\">\u003Ca class=\"heading-anchor\" href=\"#what-every-page-gets\" aria-label=\"Link to this section\" data-route=\"#what-every-page-gets\">#\u003C\u002Fa>What every page gets\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Tag\u003C\u002Fth>\n\u003Cth>Content\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode><title>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Page title and site title: “Search · Clay”\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><meta name=\"description\">\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page’s description, see below\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>og:title\u003C\u002Fcode>, \u003Ccode>og:description\u003C\u002Fcode>, \u003Ccode>og:type\u003C\u002Fcode>, \u003Ccode>og:site_name\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The same for link previews in chats and social networks\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><html lang>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The language of the page\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>article:modified_time\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The date of the last change, from git\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>With \u003Ccode>siteURL\u003C\u002Fcode> set, pages also get:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Tag\u003C\u002Fth>\n\u003Cth>Content\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode><link rel=\"canonical\">\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page’s full address, so search engines know which URL to show\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>og:url\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The same, for link previews\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Breadcrumbs (JSON-LD)\u003C\u002Ftd>\n\u003Ctd>Where the page sits, shown in search results as “Clay › Features › SEO”\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>hreflang\u003C\u002Fcode> links\u003C\u002Ftd>\n\u003Ctd>The page’s \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Ftranslations\" data-route=\"\u002F4.x\u002Forganizing\u002Ftranslations\">translations\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>og:image\u003C\u002Fcode>, \u003Ccode>twitter:card\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page’s \u003Ca href=\"#social-images\" data-route=\"#social-images\">social image\u003C\u002Fa>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"descriptions\">\u003Ca class=\"heading-anchor\" href=\"#descriptions\" aria-label=\"Link to this section\" data-route=\"#descriptions\">#\u003C\u002Fa>Descriptions\u003C\u002Fh2>\n\u003Cp>The description is the short text search engines show under a result. Clay takes the first of:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Ccode>description\u003C\u002Fcode> in the page’s \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fwriting\u002Fpages#front-matter\" data-route=\"\u002F4.x\u002Fwriting\u002Fpages#front-matter\">front matter\u003C\u002Fa>,\u003C\u002Fli>\n\u003Cli>the first paragraph of the page,\u003C\u002Fli>\n\u003Cli>the description of the start page, \u003Ccode>docs\u002Findex.md\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>It is cut to 160 characters at a word boundary. A good description says in one or two sentences what the page answers:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">description\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000FF;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">Deploy a Clay site to GitHub Pages with a workflow that builds on every push.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">---\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>A coding agent can write the missing descriptions:\u003C\u002Fp>\n\u003Cdiv class=\"clay-prompt-aura aura not-prose\">\u003Cdiv class=\"clay-prompt code-block\">\u003Cdiv class=\"clay-prompt-title\">\u003Ci class=\"fa-solid fa-wand-magic-sparkles\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>Suggested prompt\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"clay-prompt-text\">Read https:\u002F\u002Fclay-doc.github.io\u002Fclay-example-repo\u002Ffeatures\u002Fseo.md. Then give every\npage in docs\u002F without a description one: one or two sentences, at most 160\ncharacters, that say what the page answers. Find the pages with\n`npx clay edit list --json` and set each with `npx clay edit set`.\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy prompt\" aria-label=\"Copy prompt\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Ch2 id=\"social-images\">\u003Ca class=\"heading-anchor\" href=\"#social-images\" aria-label=\"Link to this section\" data-route=\"#social-images\">#\u003C\u002Fa>Social images \u003Cspan class=\"badge badge-sm badge-soft badge-success clay-badge\">New in Clay 4\u003C\u002Fspan>\u003C\u002Fh2>\n\u003Cp>A link to a page, shared in a chat or a social network, shows a picture of it: the site’s logo and title, the section, the page’s title and its description, in the colors of the dark theme.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fclay-doc.github.io\u002Fclay-example-repo\u002F_clay\u002Fsocial\u002Fpublishing\u002Fgithub-pages.png\" alt=\"The social image of the GitHub Pages guide\">\u003C\u002Fp>\n\u003Cp>Clay draws them when it builds the site, one for each page, at \u003Ccode>\u002F_clay\u002Fsocial\u002F<page>.png\u003C\u002Fcode>. They need \u003Ccode>siteURL\u003C\u002Fcode>, since link previews only load images by their full address. To build without them:\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>clay.yaml\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">socialImages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\">false\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Cstrong>Every script, and emoji.\u003C\u002Fstrong> Clay brings the font for Latin, Greek and Cyrillic letters. For other scripts, like Arabic, Hebrew, Hindi, Thai, Chinese, Japanese or Korean, and for emoji, the build fetches just the letters the images use from Google Fonts, once, and keeps them in \u003Ccode>node_modules\u002F.cache\u003C\u002Fcode>; readers never contact Google. Pages written from right to left get a mirrored image.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Without a connection\u003C\u002Fstrong>, texts whose fonts could not be fetched are left off their images, and the next build tries again.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Drawing is quick\u003C\u002Fstrong>, dozens of pages a second, and Clay keeps the images in the cache: it only draws them again when a page’s title or description changes.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Skia draws them\u003C\u002Fstrong>, the graphics engine of Chrome, through a package that comes ready-built for macOS, Linux and Windows. On a platform it has no build for, Clay builds the site without social images and says so.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"sitemap-and-robotstxt\">\u003Ca class=\"heading-anchor\" href=\"#sitemap-and-robotstxt\" aria-label=\"Link to this section\" data-route=\"#sitemap-and-robotstxt\">#\u003C\u002Fa>Sitemap and robots.txt\u003C\u002Fh2>\n\u003Cp>With \u003Ccode>siteURL\u003C\u002Fcode>, Clay writes \u003Ccode>sitemap.xml\u003C\u002Fcode> with every page and the date of its last change, and \u003Ccode>robots.txt\u003C\u002Fcode> pointing to it, and to \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Ffeatures\u002Fai-and-agents#llmstxt\" data-route=\"\u002F4.x\u002Ffeatures\u002Fai-and-agents#llmstxt\">\u003Ccode>llms.txt\u003C\u002Fcode>\u003C\u002Fa> for language models.\u003C\u002Fp>\n\u003Cdiv class=\"code-block has-title\">\u003Cdiv class=\"code-title\">\u003Ci class=\"fa-regular fa-file-lines\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan>clay.yaml\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">siteURL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"https:\u002F\u002Fmy-org.github.io\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">baseURL\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"\u002Fmy-project\u002F\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>The sitemap is then at \u003Ccode>https:\u002F\u002Fmy-org.github.io\u002Fmy-project\u002Fsitemap.xml\u003C\u002Fcode>. Submit it in \u003Ca href=\"https:\u002F\u002Fsearch.google.com\u002Fsearch-console\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Google Search Console\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fwww.bing.com\u002Fwebmasters\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Bing Webmaster Tools\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3 id=\"sites-under-a-path\">\u003Ca class=\"heading-anchor\" href=\"#sites-under-a-path\" aria-label=\"Link to this section\" data-route=\"#sites-under-a-path\">#\u003C\u002Fa>Sites under a path\u003C\u002Fh3>\n\u003Cp>Search engines only read \u003Ccode>robots.txt\u003C\u002Fcode> at the root of a domain, like \u003Ccode>https:\u002F\u002Fmy-org.github.io\u002Frobots.txt\u003C\u002Fcode>. A site under a path, like \u003Ccode>\u002Fmy-project\u002F\u003C\u002Fcode>, cannot place one there, so search engines do not learn about its sitemap from it. Clay helps in three ways:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cp>\u003Cstrong>\u003Ccode>clay build\u003C\u002Fcode> reminds you.\u003C\u002Fstrong> With \u003Ccode>siteURL\u003C\u002Fcode> and a \u003Ccode>baseURL\u003C\u002Fcode> other than \u003Ccode>\u002F\u003C\u002Fcode>, the build shows the sitemap’s address to submit:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>●  Loaded 42 pages from docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>│  ℹ robots.txt only counts at the root of a domain; submit https:\u002F\u002Fmy-org.github.io\u002Fmy-project\u002Fsitemap.xml in Google Search Console and Bing Webmaster Tools\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Every page links to the sitemap\u003C\u002Fstrong> in its head (\u003Ccode><link rel=\"sitemap\">\u003C\u002Fcode>), for tools that look for it there.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Search engines find your pages anyway\u003C\u002Fstrong> by following links; the sitemap makes it faster and complete.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Submit the sitemap once in \u003Ca href=\"https:\u002F\u002Fsearch.google.com\u002Fsearch-console\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Google Search Console\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fwww.bing.com\u002Fwebmasters\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Bing Webmaster Tools\u003C\u002Fa>. If you own the site at the root, like the \u003Ccode>my-org.github.io\u003C\u002Fcode> repository, you can instead add a line to its \u003Ccode>robots.txt\u003C\u002Fcode>: \u003Ccode>Sitemap: https:\u002F\u002Fmy-org.github.io\u002Fmy-project\u002Fsitemap.xml\u003C\u002Fcode>. With \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Fpublishing\u002Fgithub-pages\" data-route=\"\u002F4.x\u002Fpublishing\u002Fgithub-pages\">your own domain\u003C\u002Fa>, the site is at the root and its \u003Ccode>robots.txt\u003C\u002Fcode> works as it is.\u003C\u002Fp>\n\u003Ch2 id=\"versions-and-translations\">\u003Ca class=\"heading-anchor\" href=\"#versions-and-translations\" aria-label=\"Link to this section\" data-route=\"#versions-and-translations\">#\u003C\u002Fa>Versions and translations\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Pages of \u003Ca href=\"\u002Fclay-example-repo\u002F4.x\u002Forganizing\u002Fversions\" data-route=\"\u002F4.x\u002Forganizing\u002Fversions\">older versions\u003C\u002Fa> are regular pages with their own URLs and sitemap entries.\u003C\u002Fli>\n\u003Cli>A page that is not translated yet shows the original text in the other language. Its canonical link points to the original, and it is left out of the sitemap, so search engines do not see duplicate content.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13,16,19,23],{"id":7,"text":8,"level":9},"what-every-page-gets","What every page gets",2,{"id":11,"text":12,"level":9},"descriptions","Descriptions",{"id":14,"text":15,"level":9},"social-images","Social images New in Clay 4",{"id":17,"text":18,"level":9},"sitemap-and-robotstxt","Sitemap and robots.txt",{"id":20,"text":21,"level":22},"sites-under-a-path","Sites under a path",3,{"id":24,"text":25,"level":9},"versions-and-translations","Versions and translations","Titles, descriptions, canonical URLs, Open Graph tags, structured data and a sitemap that Clay creates for search engines.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Ffeatures\u002Fseo.png",1792666369495]