[{"data":1,"prerenderedAt":372},["ShallowReactive",2],{"mdc--4zkox4-key":3,"serp-preview-navigation":36,"serp-preview-version":53,"\u002Fdocs\u002Fserp-preview":54,"\u002Fdocs\u002Fserp-preview-surround":371},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8],{"type":9,"tag":10,"props":11,"children":12},"element","p",{},[13,16,25,27,34],{"type":14,"value":15},"text","We love Kirby – our plugins wouldn't exist without it. Help us improve: share feedback in ",{"type":9,"tag":17,"props":18,"children":22},"a",{"href":19,"rel":20},"https:\u002F\u002Fgithub.com\u002Fkirby-tools\u002Fcommunity\u002Fdiscussions",[21],"nofollow",[23],{"type":14,"value":24},"Discussions",{"type":14,"value":26}," or report bugs via ",{"type":9,"tag":17,"props":28,"children":31},{"href":29,"rel":30},"https:\u002F\u002Fgithub.com\u002Fkirby-tools\u002Fcommunity\u002Fissues",[21],[32],{"type":14,"value":33},"Issues",{"type":14,"value":35},".",[37],{"title":38,"path":39,"stem":40,"children":41,"icon":52},"SERP Preview","\u002Fdocs\u002Fserp-preview","1.docs\u002F7.serp-preview\u002F1.index",[42,44,48],{"title":43,"path":39,"stem":40},"Getting Started",{"title":45,"path":46,"stem":47},"Configuration","\u002Fdocs\u002Fserp-preview\u002Fconfiguration","1.docs\u002F7.serp-preview\u002F2.configuration",{"title":49,"path":50,"stem":51},"Custom Formatters","\u002Fdocs\u002Fserp-preview\u002Fformatters","1.docs\u002F7.serp-preview\u002F3.formatters","i-ri-search-eye-line",null,{"id":55,"title":43,"body":56,"description":366,"extension":367,"meta":368,"navigation":278,"path":39,"seo":369,"stem":40,"__hash__":370},"docs\u002F1.docs\u002F7.serp-preview\u002F1.index.md",{"type":57,"value":58,"toc":361},"minimark",[59,68,73,107,128,132,135,173,176,188,192,195,336,339,348,351,357],[10,60,61,62,67],{},"Kirby SERP Preview is a plugin for ",[17,63,66],{"href":64,"rel":65},"https:\u002F\u002Fgetkirby.com",[21],"Kirby CMS",". It adds a Panel section that draws the Google result snippet for the page being edited – favicon, site name, URL, title and description – and redraws it as you type, before anything is saved.",[69,70,72],"h2",{"id":71},"step-1-install-the-plugin","Step 1: Install the Plugin",[74,75,78,81],"card",{"icon":76,"title":77},"i-ri-terminal-box-line","Composer",[10,79,80],{},"The recommended way to install the plugin:",[82,83,88],"pre",{"className":84,"code":85,"language":86,"meta":87,"style":87},"language-bash shiki shiki-themes github-light github-light github-dark","composer require johannschopplich\u002Fkirby-serp-preview\n","bash","",[89,90,91],"code",{"__ignoreMap":87},[92,93,96,100,104],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"snPdu","composer",[92,101,103],{"class":102},"sIIMD"," require",[92,105,106],{"class":102}," johannschopplich\u002Fkirby-serp-preview\n",[74,108,111],{"icon":109,"title":110},"i-ri-folder-zip-line","ZIP File Download",[10,112,113,114,117,118,123,124,127],{},"Download the ",[115,116],"latest-version",{}," or head over to the ",[17,119,122],{"href":120,"rel":121},"https:\u002F\u002Fgithub.com\u002Fjohannschopplich\u002Fkirby-serp-preview\u002Freleases",[21],"releases page"," to see all versions. Extract the ZIP file to your ",[89,125,126],{},"site\u002Fplugins"," folder.",[69,129,131],{"id":130},"step-2-add-the-section-to-a-blueprint","Step 2: Add the Section to a Blueprint",[10,133,134],{},"Pick a page blueprint, or the site blueprint, and add the section:",[82,136,141],{"className":137,"code":138,"filename":139,"language":140,"meta":87,"style":87},"language-yaml shiki shiki-themes github-light github-light github-dark","sections:\n  serpPreview:\n    type: serp-preview\n","pages\u002Fdefault.yml","yaml",[89,142,143,153,161],{"__ignoreMap":87},[92,144,145,149],{"class":94,"line":95},[92,146,148],{"class":147},"sovSZ","sections",[92,150,152],{"class":151},"sxrX7",":\n",[92,154,156,159],{"class":94,"line":155},2,[92,157,158],{"class":147},"  serpPreview",[92,160,152],{"class":151},[92,162,164,167,170],{"class":94,"line":163},3,[92,165,166],{"class":147},"    type",[92,168,169],{"class":151},": ",[92,171,172],{"class":102},"serp-preview\n",[10,174,175],{},"Open a page that uses the blueprint. With nothing else configured, the snippet shows the page title as last saved, an en dash and the site title on the title line, the site URL followed by the page path underneath, and no description:",[177,178,179],"panel-mock",{},[180,181,182],"panel-section",{"label":38},[183,184],"panel-serp-preview-snippet",{"siteTitle":185,"siteUrl":186,"title":187},"Kirby Tools","https:\u002F\u002Fkirby.tools\u002Fabout","About – Kirby Tools",[69,189,191],{"id":190},"step-3-point-it-at-your-meta-fields","Step 3: Point It at Your Meta Fields",[10,193,194],{},"Most sites keep the search title and description in their own fields. Name those fields and the snippet reads them instead, falling back to the values above while they are empty:",[82,196,198],{"className":137,"code":197,"filename":139,"language":140,"meta":87,"style":87},"fields:\n  metaTitle:\n    label: Meta Title\n    type: text\n  metaDescription:\n    label: Meta Description\n    type: textarea\n    size: small\n\nsections:\n  serpPreview:\n    type: serp-preview\n    faviconUrl: \"{{ site.favicon.toFile.url }}\"\n    titleContentKey: metaTitle\n    descriptionContentKey: metaDescription\n",[89,199,200,207,214,224,234,242,252,262,273,280,287,294,303,314,325],{"__ignoreMap":87},[92,201,202,205],{"class":94,"line":95},[92,203,204],{"class":147},"fields",[92,206,152],{"class":151},[92,208,209,212],{"class":94,"line":155},[92,210,211],{"class":147},"  metaTitle",[92,213,152],{"class":151},[92,215,216,219,221],{"class":94,"line":163},[92,217,218],{"class":147},"    label",[92,220,169],{"class":151},[92,222,223],{"class":102},"Meta Title\n",[92,225,227,229,231],{"class":94,"line":226},4,[92,228,166],{"class":147},[92,230,169],{"class":151},[92,232,233],{"class":102},"text\n",[92,235,237,240],{"class":94,"line":236},5,[92,238,239],{"class":147},"  metaDescription",[92,241,152],{"class":151},[92,243,245,247,249],{"class":94,"line":244},6,[92,246,218],{"class":147},[92,248,169],{"class":151},[92,250,251],{"class":102},"Meta Description\n",[92,253,255,257,259],{"class":94,"line":254},7,[92,256,166],{"class":147},[92,258,169],{"class":151},[92,260,261],{"class":102},"textarea\n",[92,263,265,268,270],{"class":94,"line":264},8,[92,266,267],{"class":147},"    size",[92,269,169],{"class":151},[92,271,272],{"class":102},"small\n",[92,274,276],{"class":94,"line":275},9,[92,277,279],{"emptyLinePlaceholder":278},true,"\n",[92,281,283,285],{"class":94,"line":282},10,[92,284,148],{"class":147},[92,286,152],{"class":151},[92,288,290,292],{"class":94,"line":289},11,[92,291,158],{"class":147},[92,293,152],{"class":151},[92,295,297,299,301],{"class":94,"line":296},12,[92,298,166],{"class":147},[92,300,169],{"class":151},[92,302,172],{"class":102},[92,304,306,309,311],{"class":94,"line":305},13,[92,307,308],{"class":147},"    faviconUrl",[92,310,169],{"class":151},[92,312,313],{"class":102},"\"{{ site.favicon.toFile.url }}\"\n",[92,315,317,320,322],{"class":94,"line":316},14,[92,318,319],{"class":147},"    titleContentKey",[92,321,169],{"class":151},[92,323,324],{"class":102},"metaTitle\n",[92,326,328,331,333],{"class":94,"line":327},15,[92,329,330],{"class":147},"    descriptionContentKey",[92,332,169],{"class":151},[92,334,335],{"class":102},"metaDescription\n",[10,337,338],{},"Type into either field and the snippet follows:",[177,340,341],{},[180,342,343],{"label":38},[183,344],{"siteTitle":185,"siteUrl":186,"title":345,"description":346,"faviconUrl":347},"About Kirby Tools – Plugins for the Kirby Panel","Kirby Tools builds Panel plugins for editors and developers: AI content generation, translation, SEO analysis and navigation.","\u002Ffavicon.ico",[10,349,350],{},"The section never writes. It reads the form as it stands, so what you see is the unsaved draft, and closing the page without saving leaves nothing behind.",[10,352,353,354,356],{},"For every property the section takes, see the ",[17,355,45],{"href":46}," guide.",[358,359,360],"style",{},"html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}",{"title":87,"searchDepth":155,"depth":155,"links":362},[363,364,365],{"id":71,"depth":155,"text":72},{"id":130,"depth":155,"text":131},{"id":190,"depth":155,"text":191},"Draw the Google result snippet for a page inside the Panel, updating as the editor types.","md",{},{"title":43,"description":366},"sgKcieaU9oxTIkR2zk8Xk_C-0qvvGNZAuBOoVOqmw5Y",[53,53],1788798191733]