diff options
| -rw-r--r-- | README.md | 27 | ||||
| -rw-r--r-- | config.toml | 2 | ||||
| -rw-r--r-- | content/overview-code-blocks.md | 3 | ||||
| -rw-r--r-- | content/overview-embedded-vimeo.md | 5 | ||||
| -rw-r--r-- | content/overview-embedded-youtube.md | 3 | ||||
| -rw-r--r-- | content/overview-images/ferris-gesture.png | bin | 0 -> 18514 bytes | |||
| -rw-r--r-- | content/overview-images/index.md | 3 | ||||
| -rw-r--r-- | content/overview-markdown-and-style.md | 1 | ||||
| -rw-r--r-- | content/overview-math.md | 2 | ||||
| -rw-r--r-- | content/overview-rich-content/index.md | 3 | ||||
| -rw-r--r-- | content/pages/contact.md | 3 | ||||
| -rw-r--r-- | content/pages/privacy.md | 3 | ||||
| -rw-r--r-- | static/lite-vimeo.min.js | 1 | ||||
| -rw-r--r-- | templates/base.html | 2 | ||||
| -rw-r--r-- | templates/macros/head.html | 12 |
15 files changed, 55 insertions, 15 deletions
@@ -259,9 +259,32 @@ menu_footer = [ Most SEO Tags have been added as well as some important head tags for browser compatibility. -you can review them in the head section of `templates/macros/head.html`, all configurable values should be in config.toml under config.extra +You can review the SEO tags in the head macro located at `templates/macros/head.html`, all configurable values should be in config.toml under config.extra or in the content markdown files. -SEO is still a work in progress, will be performing more testing and updates as time allows. +In your post markdown file you should set a title less than 60 characters and a description between 80 and 160 characters in length. The description is what is displayed in search results below the page title. Anywhere that you do not set a page description, the primary site config.description will be used instead. + +You should also set page specific keywords unless your keywords defined in config.toml suffice, any keywords that you add to the page are in addition to the ones defined in config.toml, so do not add those same keywords to your page keywords. + +You can optionally also set a page specific image for search results by using page.extra.thumbnail. OpenGraph recommends 1200 x 630 (1.9:1). Twitter recommends 2:1 for large and 1:1 for small. If you do not set a page specific thumbnail then the banner defined in config.toml will be used instead. + +Refer to [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) for an example: +```md ++++ +title = "Image Shortcodes" +description = "Images can be embeded directly using markdown ``, but using a shortcode prevents CLS by explicitly setting the width and height." +date = 2021-05-19 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","images"] +[extra] +toc = true +keywords = "Image, Markdown, Shortcodes, Hover" +thumbnail = "ferris-gesture.png" ++++ +``` + +There are tools you can use to test your page SEO metadata, such as: [smallseotools.com](https://smallseotools.com/meta-tags-analyzer/) ### Templates diff --git a/config.toml b/config.toml index d29ca84..b302f2e 100644 --- a/config.toml +++ b/config.toml @@ -136,7 +136,7 @@ math_auto_render = false ########################## # meta/seo/analytic tags ########################## -keywords = "Whatever, SEO, keywords, you want" # used for the primary site index +keywords = "Abridge, Abridge.css, Zola, Theme, Zola Theme, getzola, Semantic Html, Fast, lightweight" # used for the primary site index twitter = "your-user-name" # used for twitter related #google = "Your Google Site verification code." #bing = "Your Bing Site verification code." diff --git a/content/overview-code-blocks.md b/content/overview-code-blocks.md index f370dc1..7a9c835 100644 --- a/content/overview-code-blocks.md +++ b/content/overview-code-blocks.md @@ -1,6 +1,6 @@ +++ title = "Code Blocks and Themes" -description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements." +description = "Sample article showcasing syntax highlighting and formatting for Code Blocks with a custom theme." date = 2022-05-16 [taxonomies] @@ -8,6 +8,7 @@ categories = ["Features"] tags = ["Markdown"] [extra] toc = true +keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme" +++ This article shows various Code Blocks allowing to easily compare sublime themes. diff --git a/content/overview-embedded-vimeo.md b/content/overview-embedded-vimeo.md index 99fb06f..54672c6 100644 --- a/content/overview-embedded-vimeo.md +++ b/content/overview-embedded-vimeo.md @@ -1,10 +1,13 @@ +++ title = "Embedded Vimeo Videos" +description = "Sample article showcasing a custom Zola shortcode for embedding Vimeo Videos into your pages." date = 2021-05-07 [taxonomies] categories = ["Features"] tags = ["shortcodes","video"] +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Vimeo" +++ Zola has many shortcodes, and new are easily added, this example shows vimeo. @@ -19,7 +22,7 @@ with `vm(id="id_here")` - `autoplay`: when set to "true", the video autoplays on load (optional) - `loop`: when set to "true", the video plays on a loop (optional) - `noautopause`: when set to "true", the video will not autopause (optional) -- `title` - set alt title for the iframe (optional, defaults to "Youtube") +- `title` - set alt title for the iframe (optional, defaults to "Vimeo") - `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false. {{ vm(id="514402648") }} diff --git a/content/overview-embedded-youtube.md b/content/overview-embedded-youtube.md index 21f6ed2..5a4b22c 100644 --- a/content/overview-embedded-youtube.md +++ b/content/overview-embedded-youtube.md @@ -1,10 +1,13 @@ +++ title = "Embedded Youtube Videos" +description = "Sample article showcasing a custom Zola shortcode for embedding Youtube Videos into your pages." date = 2021-05-08 [taxonomies] categories = ["Features"] tags = ["shortcodes","video"] +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Youtube" +++ Zola has many shortcodes, and new are easily added, this example shows youtube. diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png Binary files differnew file mode 100644 index 0000000..af30447 --- /dev/null +++ b/content/overview-images/ferris-gesture.png diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 22e1f92..3762f9d 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -1,5 +1,6 @@ +++ title = "Image Shortcodes" +description = "Images can be embeded directly using markdown ``, but using a shortcode prevents CLS by explicitly setting the width and height." date = 2021-05-19 [taxonomies] @@ -7,6 +8,8 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true +keywords = "Image, Markdown, Shortcodes, Hover" +thumbnail = "ferris-gesture.png" +++ This post covers the **imghover and img shortcodes**. Images can also be embeded directly using markdown ``, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score. diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md index df64054..7a03d28 100644 --- a/content/overview-markdown-and-style.md +++ b/content/overview-markdown-and-style.md @@ -8,6 +8,7 @@ categories = ["Features"] tags = ["Markdown"] [extra] toc = true +keywords = "Markdown, Style, Syntax, Syntax Highlighting" +++ This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme. diff --git a/content/overview-math.md b/content/overview-math.md index a759cac..c58f13b 100644 --- a/content/overview-math.md +++ b/content/overview-math.md @@ -1,5 +1,6 @@ +++ title = "Mathematical Notations" +description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library." date = 2021-05-05 updated = 2022-01-01 [taxonomies] @@ -8,6 +9,7 @@ tags = ["shortcodes","Mathematics"] [extra] math = true math_auto_render = true +keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" +++ You can use [KaTeX](https://katex.org) to render mathematical notations. diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index 27c1718..39ddbfb 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -1,6 +1,6 @@ +++ title = "Rich Content" -description = "A brief description of Zola Shortcodes" +description = "A brief description of custom Shortcodes for Zola that implement modern html elements: video, image, gif, audio." date = 2021-05-18 [taxonomies] @@ -8,6 +8,7 @@ categories = ["Features"] tags = ["video", "audio", "images", "shortcodes"] [extra] toc = true +keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" +++ Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)), in addition to those [already provided by Zola][built-in]. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing. diff --git a/content/pages/contact.md b/content/pages/contact.md index 10fbd30..c76247c 100644 --- a/content/pages/contact.md +++ b/content/pages/contact.md @@ -1,5 +1,6 @@ +++ title = "Contact" +description = "To reach us please use the contact form on this page." path = "contact" template = "contact.html" -+++ ++++
\ No newline at end of file diff --git a/content/pages/privacy.md b/content/pages/privacy.md index 18fe90f..460413c 100644 --- a/content/pages/privacy.md +++ b/content/pages/privacy.md @@ -1,5 +1,6 @@ +++ -title = "Privacy" +title = "Privacy Policy" +description = "This page outlines the Privacy Policy for this site, and the date at which this policy was put into affect." path = "privacy" template = "pages.html" +++ diff --git a/static/lite-vimeo.min.js b/static/lite-vimeo.min.js new file mode 100644 index 0000000..692eea0 --- /dev/null +++ b/static/lite-vimeo.min.js @@ -0,0 +1 @@ +let LiteVimeoEmbed=(()=>{class i extends HTMLElement{constructor(){super(),this.iframeLoaded=!1,this.setupDom()}static get observedAttributes(){return["videoid"]}connectedCallback(){this.addEventListener("pointerover",i.warmConnections,{once:!0}),this.addEventListener("click",()=>this.addIframe())}get videoId(){return encodeURIComponent(this.getAttribute("videoid")||"")}set videoId(e){this.setAttribute("videoid",e)}get videoTitle(){return this.getAttribute("videotitle")||"Video"}set videoTitle(e){this.setAttribute("videotitle",e)}get videoPlay(){return this.getAttribute("videoPlay")||"Play"}set videoPlay(e){this.setAttribute("videoPlay",e)}get videoStartAt(){return this.getAttribute("videoPlay")||"0s"}set videoStartAt(e){this.setAttribute("videoPlay",e)}get autoLoad(){return this.hasAttribute("autoload")}set autoLoad(e){e?this.setAttribute("autoload",""):this.removeAttribute("autoload")}get autoPlay(){return this.hasAttribute("autoplay")}set autoPlay(e){e?this.setAttribute("autoplay","autoplay"):this.removeAttribute("autoplay")}setupDom(){const e=this.attachShadow({mode:"open"});e.innerHTML=`<style>:host{contain:content;display:block;position:relative;width:100%;padding-bottom:calc(100% / (16 / 9))}#fallbackPlaceholder,#frame,iframe{position:absolute;width:100%;height:100%}#frame{cursor:pointer}#fallbackPlaceholder{object-fit:cover}#frame::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,.2,1);z-index:1}.lvo-playbtn{width:70px;height:46px;background-color:#212121;z-index:1;opacity:.8;border-radius:10%;transition:all .2s cubic-bezier(0,0,.2,1);border:0}#frame:hover .lvo-playbtn{background-color:#62afed;opacity:1}.lvo-playbtn:before{content:'';border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}.lvo-playbtn,.lvo-playbtn:before{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.lvo-activated{cursor:unset}#frame.lvo-activated::before,.lvo-activated .lvo-playbtn{display:none}</style><div id="frame"><picture><source id="webpPlaceholder" type="image/webp"><source id="jpegPlaceholder" type="image/jpeg"><img id="fallbackPlaceholder" referrerpolicy="origin"></picture><button class="lvo-playbtn"></button></div> `,this.domRefFrame=this.shadowRoot.querySelector("#frame"),this.domRefImg={fallback:this.shadowRoot.querySelector("#fallbackPlaceholder"),webp:this.shadowRoot.querySelector("#webpPlaceholder"),jpeg:this.shadowRoot.querySelector("#jpegPlaceholder")},this.domRefPlayButton=this.shadowRoot.querySelector(".lvo-playbtn")}setupComponent(){this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.setAttribute("title",this.videoPlay+": "+this.videoTitle),this.autoLoad&&this.initIntersectionObserver()}attributeChangedCallback(e,t,o){"videoid"===e&&t!==o&&(this.setupComponent(),this.domRefFrame.classList.contains("lvo-activated")&&(this.domRefFrame.classList.remove("lvo-activated"),this.shadowRoot.querySelector("iframe").remove()))}addIframe(){var e;this.iframeLoaded||(e=this.autoLoad&&this.autoPlay||!this.autoLoad?"autoplay=1":"",e=new URL(`/video/${this.videoId}?${e}&#t=`+this.videoStartAt,"https://player.vimeo.com/"),this.domRefFrame.insertAdjacentHTML("beforeend",`<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="${e}"></iframe>`),this.domRefFrame.classList.add("lvo-activated"),this.iframeLoaded=!0)}async initImagePlaceholder(){i.addPrefetch("preconnect","https://i.vimeocdn.com/");var e=`https://vimeo.com/api/v2/video/${this.videoId}.json`;let t=(await(await fetch(e)).json())[0].thumbnail_large;var e=t.substr(t.lastIndexOf("/")+1).split("_")[0],o=`https://i.vimeocdn.com/video/${e}.jpg?mw=1100&mh=619&q=70`;this.domRefImg.webp.srcset=`https://i.vimeocdn.com/video/${e}.webp?mw=1100&mh=619&q=70`,this.domRefImg.jpeg.srcset=o,this.domRefImg.fallback.src=o,this.domRefImg.fallback.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.domRefImg.fallback.setAttribute("alt",this.videoPlay+": "+this.videoTitle)}initIntersectionObserver(){if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window){const e=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&!this.iframeLoaded&&(i.warmConnections(),this.addIframe(),t.unobserve(this))})},{root:null,rootMargin:"0px",threshold:0});e.observe(this)}}static addPrefetch(e,t,o){const i=document.createElement("link");i.rel=e,i.href=t,o&&(i.as=o),i.crossOrigin="true",document.head.append(i)}static warmConnections(){i.preconnected||(i.addPrefetch("preconnect","https://f.vimeocdn.com"),i.addPrefetch("preconnect","https://player.vimeo.com"),i.addPrefetch("preconnect","https://i.vimeocdn.com"),i.preconnected=!0)}}return i.preconnected=!1,i})();customElements.define("lite-vimeo",LiteVimeoEmbed);export{LiteVimeoEmbed}; diff --git a/templates/base.html b/templates/base.html index b1a3615..613bec7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -24,7 +24,7 @@ <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> {{- macros_head::math() }} - <noscript><style>.searchd{display:none;}</style></noscript> + <noscript><style>.searchd{display:none}</style></noscript> </head> <body> {%- block header %} diff --git a/templates/macros/head.html b/templates/macros/head.html index f6090a6..82e7100 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -89,7 +89,7 @@ {%- if config.extra.facebook_publisher %} <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra.facebook_publisher }}" /> {%- endif %} - <meta name="copyright" content="{{ title }}" /> + <meta name="copyright" content="{{ config.title }}" /> {%- if config.extra.facebook_author %} <meta property="article:author" content="https://www.facebook.com/{{ config.extra.facebook_author }}" /> {%- endif %} @@ -128,11 +128,11 @@ {%- endif %} {%- if page.title %} - <meta property="og:title" content="{{ page.title }} | {{ title }}" /> - <meta name="twitter:title" content="{{ page.title }} | {{ title }}" /> + <meta property="og:title" content="{{ page.title }} | {{ config.title }}" /> + <meta name="twitter:title" content="{{ page.title }} | {{ config.title }}" /> {%- else %} - <meta property="og:title" content="{{ title }}" /> - <meta name="twitter:title" content="{{ title }}" /> + <meta property="og:title" content="{{ config.title }}" /> + <meta name="twitter:title" content="{{ config.title }}" /> {%- endif %} @@ -177,7 +177,7 @@ {%- endif %} {#- SEO MEDIA END #} - <meta property="og:site_name" content="{{ title }}" /> + <meta property="og:site_name" content="{{ config.title }}" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> {%- if page.updated %} |
