{"id":104267,"date":"2022-06-01T12:00:00","date_gmt":"2022-06-01T12:00:00","guid":{"rendered":"https:\/\/www.markup.io\/?p=4077"},"modified":"2024-01-12T13:10:27","modified_gmt":"2024-01-12T13:10:27","slug":"how-to-annotate-a-website","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/","title":{"rendered":"How to annotate a website in 4 simple steps"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>We need to talk!<\/p>\n\n\n\n<p>Taking screenshots of entire web pages to provide feedback to devs or designers won\u2019t cut it anymore.<\/p>\n\n\n\n<p>It\u2019s just too time-consuming and resource-intensive.<\/p>\n\n\n\n<p>We\u2019re here to show you how to annotate a website and <strong>transform your proofing process<\/strong>.<\/p>\n\n\n\n<p>Namely, this post is going to cover:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What web annotations are<\/li>\n\n\n\n<li>How annotating websites can make your life easier<\/li>\n\n\n\n<li>How to annotate a website<\/li>\n\n\n\n<li>Four website annotation tools you can use to get started<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s get into it!<\/p>\n\n\n\n<div class=\"toc\">\n\n\n<p><b>Table of contents<\/b><\/p>\n\n\n\n<li><a href=\"#C1\">What is website annotation?<\/a><\/li>\n\n\n<li><a href=\"#C2\">Who benefits from website annotation tools &amp; how?<\/a><\/li>\n\n\n<li><a href=\"#C3\">How to annotate a website in 4 easy steps<\/a><\/li>\n\n\n<li><a href=\"#C4\">Top 4 website annotation tools<\/a><\/li>\n\n\n<li><a href=\"#C5\">Frequently asked questions (FAQs)<\/a><\/li>\n\n\n\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C1\">What is website annotation?<\/h2>\n\n\n\n<p><strong>Website annotation<\/strong> is the process of adding comments or notes to a markup of a live webpage without editing the HTML code. Furthermore, the added comments are visible to other users who are sharing the same annotation tool or service.<\/p>\n\n\n\n<p>In other words, <strong>annotating web pages is an easy way to provide feedback<\/strong> when reviewing your team&#8217;s web design projects.&nbsp;<\/p>\n\n\n\n<p>Moreover, web annotation systems offer you the ability to <strong>give contextual feedback<\/strong>, thus helping you save time and become more efficient as a reviewer.<\/p>\n\n\n\n<p>Instead of spending hours writing endless threads of context-less comments your designers then need to decipher, you can spend seconds simply clicking anywhere in the section you want to make changes and dropping a pin directly on the element you want to be modified.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>It\u2019s that easy.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"192\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/email-vs-web-annotation.png\" alt=\"Comparison between sending email feedback versus website annotation\" class=\"wp-image-104453\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/email-vs-web-annotation.png 500w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/email-vs-web-annotation-180x69.png 180w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption class=\"wp-element-caption\">Kiss email feedback goodbye and say hello to web annotation!<\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Let&#8217;s look at a quick example using <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a> (sound familiar?). With this tool, all you have to do to <a href=\"https:\/\/support.markup.io\/hc\/en-us\/articles\/4413415471635-Create-a-MarkUp\" target=\"_blank\" rel=\"noreferrer noopener\">create a <strong>web markup<\/strong><\/a> and start annotating is to either enter a URL into the URL bar on MarkUp.io or install the <a href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-on-google-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp for Chrome extension<\/a> and select the \u201cCreate MarkUp\u201d button.&nbsp;<\/p>\n\n\n\n<p>That\u2019s it!<\/p>\n\n\n\n<p>Now, you can immediately start leaving comments wherever you feel like it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"352\" height=\"175\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/create-markup-in-red.jpeg\" alt=\"How to create a Website MarkUp with the MarkUp for Chrome extension.\" class=\"wp-image-104458\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/create-markup-in-red.jpeg 352w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/create-markup-in-red-180x89.jpeg 180w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Now, let\u2019s have a look at who benefits the most from utilizing web annotation systems like MarkUp.io.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C2\">Who benefits from website annotation tools, and how?<\/h2>\n\n\n\n<p>Web annotation systems are useful tools for individuals and businesses across multiple industries, such as education, marketing, web development, and more.<\/p>\n\n\n\n<p>With web annotation tools, professionals have the ability to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Improve web content and design through concise feedback<\/li>\n\n\n\n<li>Leverage frictionless collaboration and communication<\/li>\n\n\n\n<li>Boost productivity and efficiency<\/li>\n\n\n\n<li>Minimize feedback loops and reduce unnecessary email exchanges<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"741\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-use-cases-1024x741.png\" alt=\"Website annotation use cases\" class=\"wp-image-201257\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-use-cases-1024x741.png 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-use-cases-300x217.png 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-use-cases-768x556.png 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-use-cases.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Let\u2019s dive into the <strong>four most common use cases for website annotation systems,<\/strong> as well as the benefits these business categories can harness by annotating content on websites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Creative agencies<\/strong><\/h3>\n\n\n\n<p>Creative agencies are usually working under the constant pressure of tight deadlines and insane workflows.<\/p>\n\n\n\n<p>And you know what\u2019s even more insane? The challenging part of these professionals\u2019 work lives is not even juggling deadlines and projects.&nbsp;<\/p>\n\n\n\n<p>It\u2019s the constant haggling&nbsp; over email with clients and higher-ups who have conflicting artistic visions with the creatives.&nbsp;<\/p>\n\n\n\n<p>On top of that, some of these reviewers have different expertise and professional backgrounds than, say, digital marketers, bloggers, and other types of content creators.<\/p>\n\n\n\n<p>The result?<\/p>\n\n\n\n<p>People trying to get on the same page while speaking different languages.<\/p>\n\n\n\n<p>It\u2019s not pretty.<\/p>\n\n\n\n<p>If you\u2019ve ever had to send one of those \u201cas per my last email\u201d messages, then you know exactly what we\u2019re talking about.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-video-karen-1.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/typing-karen-manager-f8bFYRLD7pTpWmAxbs\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>This is the main pain point that web annotation systems address. And, believe it or not, you can get everyone singing the same song with a couple of clicks and a link.<\/p>\n\n\n\n<p>But it\u2019s not just creatives who are breathing a sigh of relief right now. The same goes for developers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Developers<\/strong><\/h3>\n\n\n\n<p>Did you know that more than half of small businesses <a href=\"https:\/\/medium.datadriveninvestor.com\/why-outsourcing-a-dedicated-web-developer-has-become-so-important-in-2020-16ce9db0088\" target=\"_blank\" rel=\"noreferrer noopener\">outsource their web development<\/a> needs?<\/p>\n\n\n\n<p>Those businesses and offshore developers are both feedback-reliant.<\/p>\n\n\n\n<p>Imagine the process of a not so tech-savvy manager giving feedback to a developer using anything but web development vocabulary.<\/p>\n\n\n\n<p>Must be painful.<\/p>\n\n\n\n<p>At the same time, let\u2019s not forget that <a href=\"https:\/\/www2.deloitte.com\/global\/en\/pages\/operations\/articles\/gx-global-outsourcing-survey.html\" target=\"_blank\" rel=\"noreferrer noopener\">roughly 70% of businesses<\/a> that resort to web development outsourcing do so to cut costs.<\/p>\n\n\n\n<p>This basically means that businesses look for lower hourly rates, which can usually be found in economically developing countries.<\/p>\n\n\n\n<p>So, (possibly) non-tech people giving feedback to devs who speak English as a second language over long emails or never-ending calls?<\/p>\n\n\n\n<p>Ouch!<\/p>\n\n\n\n<p>Wouldn&#8217;t it be easier to just annotate web pages with easy-to-understand comments?<\/p>\n\n\n\n<p>You already know the answer to that question (and if you\u2019re a little lost, we have a hint for you: \u201cYes, it would\u201d).<\/p>\n\n\n\n<p>When incorporating website annotations into your workflow, you and your collaborators save a lot of time and make things easier for everyone involved in the process.<\/p>\n\n\n\n<p>Designers, is this super relatable for you as well?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Designers<\/strong><\/h3>\n\n\n\n<p>Design teams go through similar hardships when trying to get design assets approved.<\/p>\n\n\n\n<p>This is <em>especially<\/em> true for freelance designers, who account for as much as <a href=\"https:\/\/findstack.com\/graphic-design-statistics\/\" target=\"_blank\" rel=\"noreferrer noopener\">90% of this industry\u2019s demographics<\/a>.<\/p>\n\n\n\n<p>The review process usually goes as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Exporting designs in PDF documents<\/li>\n\n\n\n<li>Sending designs over email for review<\/li>\n\n\n\n<li>Receiving vague or confusing feedback via Microsoft Paint-doodled screenshots<\/li>\n\n\n\n<li>Wasting time deciphering what the client meant to say and still getting it wrong sometimes (ugh, we\u2019ve been there)<\/li>\n\n\n\n<li>The second round of feedback<\/li>\n\n\n\n<li>Designers wondering what they\u2019ve done to deserve this<\/li>\n\n\n\n<li>Clients getting frustrated<\/li>\n\n\n\n<li>Finally getting everyone on the same page<\/li>\n\n\n\n<li>Rinse and repeat<\/li>\n<\/ul>\n\n\n\n<p>What if we told you that this overly-complicated process can be reduced to four simple steps? Check it out:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The designer creates a markup with the deliverables and shares it with the client via a link<\/li>\n\n\n\n<li>The client adds notes right on the design markup<\/li>\n\n\n\n<li>The designer implements the feedback<\/li>\n\n\n\n<li>The client approves the design<\/li>\n\n\n\n<li>Everyone blinks in amazement at just how easy that process was<\/li>\n<\/ol>\n\n\n\n<p>Isn\u2019t it convenient?<\/p>\n\n\n\n<p>Remote teams can also implement a similar workflow\u2014which brings us to our next point.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Remote teams&nbsp;<\/strong><\/h3>\n\n\n\n<p>According to Forbes, by 2025, 36 million Americans will be<a href=\"https:\/\/www.forbes.com\/sites\/robinryan\/2023\/01\/10\/heres-whats-happening-to-remote-work-in-2023\/?sh=435ae04279d9\" target=\"_blank\" rel=\"noreferrer noopener\"> working remotely.<\/a><\/p>\n\n\n\n<p>The professionals filling these remote roles don&#8217;t have the possibility of relying on in-person communication to discuss projects with co-workers.<\/p>\n\n\n\n<p>In this case, <strong>collaboration is solely digital<\/strong>.<\/p>\n\n\n\n<p>That\u2019s the reason why many remote-first businesses have integrated collaborative tools such as Google Drive and Google Docs into their workflows.<\/p>\n\n\n\n<p>Sure, this service is great for adding notes to text.<\/p>\n\n\n\n<p>But what about graphics? Or PDFs? In short, not all projects can be done in Google Docs.&nbsp;<\/p>\n\n\n\n<p>While Google Docs is great for a lot of things, at the end of the day, the tool just&nbsp; doesn\u2019t support sharing and annotating video projects, live websites, and other file formats.<\/p>\n\n\n\n<p>The solution to <strong>painless file sharing and deliverable proofing <\/strong>for everyone?<\/p>\n\n\n\n<p>Enter\u2026annotation apps.<\/p>\n\n\n\n<p>When we say everyone, we mean it! Even teachers and students can use annotation tools to simplify their lives.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Teachers and students<\/strong><\/h3>\n\n\n\n<p>There\u2019s no secret that the education industry revolves heavily around research and proofing students\u2019 assignments.&nbsp;<\/p>\n\n\n\n<p>That\u2019s exactly the direction in which the functionality of annotation tools is expanding towards.<\/p>\n\n\n\n<p>Namely, digital sticky notes and bookmarks help students and teachers <strong>annotate readings in a much easier way<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Not only that, but annotation technology also helps people <strong>keep their notes organized<\/strong> as opposed to having pieces of paper with valuable information stored all over the place.&nbsp;<\/p>\n\n\n\n<p>Piecing those together is no fun\u2014unless you\u2019re a puzzle enthusiast. And even then, who wants to solve a puzzle that didn\u2019t need to be an issue&nbsp;in the first place?<\/p>\n\n\n\n<p>Plus, teachers can proof student submissions quickly and easily when using annotation software.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-educate.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/tenor.com\/view\/happydance-educate-learn-learn-something-teach-gif-5608071\" target=\"_blank\" rel=\"noreferrer noopener\">Tenor<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Now that you know who can benefit from web annotations, let\u2019s see how you can <strong>annotate a website in the blink of an eye<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C3\">How to annotate a website in 4 easy steps<\/h2>\n\n\n\n<p>To show you just how easy it is to start annotating a website with our platform, we\u2019ve broken down the process into <strong>four steps that are super easy to follow<\/strong>.<\/p>\n\n\n\n<p>Let\u2019s have a look at the first one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #1: Signup with MarkUp.io<\/strong><\/h3>\n\n\n\n<p>Believe it or not, <strong>MarkUp.io is a visual commenting platform that offers a free plan for users.&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-signup.jpg\" alt=\"MarkUp.io signup page\" class=\"wp-image-201258\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-signup.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-signup-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-signup-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can <a href=\"https:\/\/app.markup.io\/signup?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=annotate-website-blog&amp;utm_content=sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for an account<\/a> without entering your credit card information.<\/p>\n\n\n\n<p>You just input your email, choose a password, and presto! You just got yourself your very own MarkUp.io account.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #2: Download the MarkUp For Chrome extension<\/strong><\/h3>\n\n\n\n<p>Next, <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/markup-for-chrome\/llbkdcpbiogplgmefnkbgcdfiopfphbc?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">install our Chrome extension<\/a> from the Chrome web store.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-for-chrome.jpg\" alt=\"MarkUp for Chrome extension\" class=\"wp-image-201259\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-for-chrome.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-for-chrome-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-for-chrome-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>This little add-on makes <strong>annotating as simple as bookmarking <\/strong>your favorite web page.<\/p>\n\n\n\n<p>Specifically, it acts like a MarkUp.io shortcut for easy markup creation with just one click.&nbsp;<\/p>\n\n\n\n<p>Additionally, you can use the extension to open any markup you\u2019ve created using our platform.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-chrome-ext.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>When clicking the \u201cCreate MarkUp\u201d button, your website markup will instantly open in a new tab where you can add notes and comments.<\/p>\n\n\n<div class=\"wp-block-image essb-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"681\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/how-to-annotate-a-website-markup-io.jpg\" alt=\"Pinning comments to a Website MarkUp.\" class=\"wp-image-106441\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/how-to-annotate-a-website-markup-io.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/how-to-annotate-a-website-markup-io-768x594.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/how-to-annotate-a-website-markup-io-180x139.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/how-to-annotate-a-website-markup-io-540x418.jpg 540w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>If you\u2019re not a Chrome browser enthusiast, worry not!<\/p>\n\n\n\n<p>MarkUp.io works on any web browser, including Mozilla Firefox, Apple&#8217;s Safari, and Microsoft Edge.<\/p>\n\n\n\n<p>If you\u2019re using any of the previously mentioned browsers, head over to step number three.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #3: Enter a website URL<\/strong><\/h3>\n\n\n\n<p>Step number three is actually an alternative to step number two, meaning that you can also annotate webpages without the browser extension.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>To do so, you\u2019ll have to go to your MarkUp.io dashboard first.<\/p>\n\n\n\n<p>Then, enter the URL of the page you want to create a markup of in the \u201cEnter a URL here\u201d field. Next, click on the \u201cGo\u201d button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"123\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1024x123.png\" alt=\"The URL bar in MarkUp.io can create MarkUps of live websites and webpages.\" class=\"wp-image-106443\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1024x123.png 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1100x133.png 1100w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-768x93.png 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-180x22.png 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-540x65.png 540w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1080x130.png 1080w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1145x138.png 1145w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar-1200x145.png 1200w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-url-bar.png 1494w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>As soon as you do that, you will have a brand-new, high-quality copy of the desired web page and can start working on step number four.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step #4: Start annotating<\/strong><\/h3>\n\n\n\n<p>Now all that\u2019s left to do is to begin adding comments to your website markup.<\/p>\n\n\n\n<p>To do so, you can click anywhere on the screen and write your feedback.<\/p>\n\n\n\n<p>The annotating toolbar will allow you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;Format text<\/li>\n\n\n\n<li>Add image or video attachments<\/li>\n\n\n\n<li>Embed links in the comments<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-emoji-comments.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Moreover, when you add notes, the people you\u2019ve shared <strong>the markup with can see them in real-time<\/strong>.<\/p>\n\n\n\n<p>This streamlines the whole process, enabling devs and designers to <strong>implement feedback at the same time you\u2019re posting your comments<\/strong>.<\/p>\n\n\n\n<p>As your collaborators make your suggested edits, they will resolve the related comments.&nbsp;<\/p>\n\n\n\n<p>This doesn\u2019t mean those comments will disappear though! You can find all resolved comments in the aptly-named \u201cResolved\u201d section.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"681\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-resolve-comment.jpg\" alt=\"Resolved comments live in the Comment Panel on the lefthand side of your Website MarkUp.\" class=\"wp-image-106442\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-resolve-comment.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-resolve-comment-768x594.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-resolve-comment-180x139.jpg 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/how-to-annotate-a-website-resolve-comment-540x418.jpg 540w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>This offers you <strong>better visibility into the progress of each project<\/strong> you\u2019re working on.<\/p>\n\n\n\n<p>That\u2019s about it.<\/p>\n\n\n\n<p>We told you it\u2019s super easy! And we bet you\u2019re just chomping at the bit to get started &#8211; and we\u2019ve got you covered!<\/p>\n\n\n\n<p>Head over to the next section to learn about four of the best website annotation tools available on today\u2019s market.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C4\">Top 4 website annotation tools<\/h2>\n\n\n\n<p>Finally, here comes the juicy part!&nbsp;<\/p>\n\n\n\n<p>We\u2019re talking about the stars of today\u2019s show:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>MarkUp.io<\/li>\n\n\n\n<li>Pastel<\/li>\n\n\n\n<li>Markup Hero<\/li>\n\n\n\n<li>Hypothes.is<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"819\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/Annotation-Tools-7-1.png\" alt=\"A comparison between four website annotation tools shows they have four key features in common.\" class=\"wp-image-104672\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/Annotation-Tools-7-1.png 660w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/Annotation-Tools-7-1-180x223.png 180w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/Annotation-Tools-7-1-540x670.png 540w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>For a more comprehensive list of solutions, feel free to read our post on <a href=\"https:\/\/www.markup.io\/blog\/annotation-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">annotation tools<\/a> where we discuss the pricing and features of 11 such platforms.<\/p>\n\n\n\n<p><em>Please, after you.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tool #1: MarkUp.io<\/strong><\/h3>\n\n\n\n<p>Let\u2019s start with the platform that needs no introduction (mainly because we\u2019ve been talking about it throughout this entire article) &#8211; <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-io.jpg\" alt=\"Homepage of web annotation tool MarkUp.io\" class=\"wp-image-201263\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-io.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-io-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-io-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Our tool offers users the ability to provide <strong>real-time feedback using any device<\/strong> and from their browser of choice.<\/p>\n\n\n\n<p>When annotating a project in MarkUp.io, you are able to pin your notes directly to a specific page or area within the site and <strong>give your feedback that much-needed context you didn\u2019t even know you needed<\/strong>.<\/p>\n\n\n\n<p>Say goodbye to trying (and failing) to explain which design element you want to be changed, <em>how <\/em>it should be changed,&nbsp; and where it is located on the website.<\/p>\n\n\n\n<p>With MarkUp.io, you can <strong>create a canvas of any website<\/strong> with a click of a button. And, with another click, you\u2019ll be able to <strong>provide concise feedback<\/strong>.<\/p>\n\n\n\n<p>What\u2019s more, our <strong>collaborative annotation system<\/strong> also offers features such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PDF annotations<\/li>\n\n\n\n<li>Image annotations<\/li>\n\n\n\n<li>Video annotations (learn more about our latest feature <a href=\"https:\/\/www.markup.io\/blog\/video-markups-collaborate-on-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>)<\/li>\n\n\n\n<li>Account-level permissions and team management (coming soon!)<\/li>\n\n\n\n<li>MarkUp annotation notifications<\/li>\n<\/ul>\n\n\n\n<p>And more!<\/p>\n\n\n\n<p>With that out of the way, let\u2019s move on to solution number two.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tool #2: Pastel<\/strong><\/h3>\n\n\n\n<p>Second on our list is <strong>Pastel<\/strong>, an annotation tool for developers and designers.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-pastel.jpg\" alt=\"Pastel's homepage.\" class=\"wp-image-201264\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-pastel.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-pastel-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-pastel-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/usepastel.com\/website-annotation-tool\" target=\"_blank\" rel=\"noreferrer noopener\">Pastel<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Pastel enables users to share and get feedback on multiple digital assets, such as live websites, PDFs, and images.<\/p>\n\n\n\n<p>Moreover, this tool also helps you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Annotate text<\/li>\n\n\n\n<li>Keep feedback organized with labels<\/li>\n\n\n\n<li>Make copy-level edits on a website markup<\/li>\n\n\n\n<li>Collaborate with team members, stakeholders, and clients via shareable links<\/li>\n<\/ul>\n\n\n\n<p>Going further\u2026<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tool #3: Markup Hero<\/strong><\/h3>\n\n\n\n<p>The third tool we\u2019re gonna have a look at is <strong>Markup Hero<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-hero.jpg\" alt=\"MarkUp Hero's homepage.\" class=\"wp-image-201266\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-hero.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-hero-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-markup-hero-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/markuphero.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Markup Hero<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Markup Hero is a comprehensive solution for reviewing and annotating text, webpages, PDFs, and images.&nbsp;<\/p>\n\n\n\n<p>When using this tool, you can edit or comment on uploaded files using text and text highlights.<\/p>\n\n\n\n<p>Alternatively, you can <strong>use drawing tools to give a more visually detailed explanation<\/strong> of the changes you\u2019d like made.<\/p>\n\n\n\n<p>Last, but not least\u2026<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tool #4: Hypothes.is<\/strong><\/h3>\n\n\n\n<p>The last web annotation solution on our list is <strong>Hypothes.is<\/strong>, which is a great research tool for both public and private annotations.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"470\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/06\/annotate-website-hypothesis.jpg\" alt=\"Hypothes.is' homepage.\" class=\"wp-image-201267\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-hypothesis.jpg 880w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-hypothesis-300x160.jpg 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/06\/annotate-website-hypothesis-768x410.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/web.hypothes.is\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hypothes.is<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Hypothes.is is a <strong>social annotation software<\/strong> solution that enables users to make web annotations.&nbsp;<\/p>\n\n\n\n<p>The platform allows users to <strong>highlight text and take notes on web pages<\/strong> in a contextual way.<\/p>\n\n\n\n<p>Furthermore, it has been called&nbsp; \u201ca peer review layer for the entire Internet\u201d because it encourages users to comment on paragraphs of selected text and assess sources whenever they encounter something that sparks their interest.<\/p>\n\n\n\n<p>In short, <strong>this platform facilitates the peer review of digital content<\/strong> with the use of public annotations.&nbsp;<\/p>\n\n\n\n<p>Cool, right?<\/p>\n\n\n\n<p>It basically makes the information inside online articles more reliable for its users.<\/p>\n\n\n\n<p>And this brings us to the end of our list.<\/p>\n\n\n\n<p>Let\u2019s wrap it up!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Over to you<\/h2>\n\n\n\n<p>We truly hope this post has offered you an overview of how useful website annotations are for everyone with a workflow reliant on proofing and providing feedback.<\/p>\n\n\n\n<p>If you want to take it up a notch, you\u2019ll be happy to find out that you can <a href=\"https:\/\/app.markup.io\/signup?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=annotate-website-blog&amp;utm_content=sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">sign up with MarkUp for free!<\/a><\/p>\n\n\n\n<p>You&#8217;ll be making your own website annotations in no time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"C5\">Frequently asked questions (FAQs)<\/h2>\n\n\n\n<p>One more thing before you go.<\/p>\n\n\n\n<p>We\u2019ve gathered the most common FAQs about how to annotate a website and answered them below.<\/p>\n\n\n\n<p>Take a look, and if by the end of this section, you still have questions, please don\u2019t hesitate to <a href=\"https:\/\/support.markup.io\/hc\/en-us\/requests\/new\" target=\"_blank\" rel=\"noreferrer noopener\">reach out to us<\/a>.<\/p>\n\n\n\n<p>We\u2019ll be more than happy to help!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Q1. Can you annotate a web page?<\/strong><\/h3>\n\n\n\n<p>Of course you can annotate a web page; in fact, it can be quite easy to do if you use an annotation tool like MarkUp.io.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Q2. How do I annotate a website on my laptop?<\/strong><\/h3>\n\n\n\n<p>To annotate a website on your laptop you first need to create a markup by simply pasting the URL of the website into the &#8220;Enter a URL here&#8221; field on your MarkUp.io dashboard.&nbsp;<\/p>\n\n\n\n<p>As soon as you do that, our platform creates a markup of the respective website, where you can start adding your feedback and annotations in the comments.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Q3. How do I annotate a website in Chrome?<\/strong><\/h3>\n\n\n\n<p>To annotate a website in Chrome you need to install the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/markup-for-chrome\/llbkdcpbiogplgmefnkbgcdfiopfphbc?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io Chrome extension<\/a>.&nbsp;<\/p>\n\n\n\n<p>Then, you can simply create a markup of any web page on the internet by simply hitting the \u201cCreate MarkUp\u201d button. After you do so, you can instantly start annotating.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We need to talk! Taking screenshots of entire web pages to provide feedback to devs or designers won\u2019t cut it anymore. It\u2019s just too time-consuming and resource-intensive. We\u2019re here to show you how to annotate a website and transform your proofing process. Namely, this post is going to cover:&nbsp; Let\u2019s get into it! Table of &hellip; <a href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":105668,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-104267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to annotate a website in 4 simple steps - Markup.io<\/title>\n<meta name=\"description\" content=\"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to annotate a website in 4 simple steps - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-01T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-12T13:10:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\",\"url\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\",\"name\":\"How to annotate a website in 4 simple steps - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png\",\"datePublished\":\"2022-06-01T12:00:00+00:00\",\"dateModified\":\"2024-01-12T13:10:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png\",\"width\":1280,\"height\":720,\"caption\":\"How to annotate a website in 4 simple steps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to annotate a website in 4 simple steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to annotate a website in 4 simple steps - Markup.io","description":"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/","og_locale":"en_GB","og_type":"article","og_title":"How to annotate a website in 4 simple steps - Markup.io","og_description":"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.","og_url":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/","og_site_name":"Markup.io","article_published_time":"2022-06-01T12:00:00+00:00","article_modified_time":"2024-01-12T13:10:27+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/","url":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/","name":"How to annotate a website in 4 simple steps - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png","datePublished":"2022-06-01T12:00:00+00:00","dateModified":"2024-01-12T13:10:27+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Want to know how to annotate a website hassle-free? Our guide covers all steps to website annotation, as well as top web annotation tools.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/08\/How-to-annotate-a-website.png","width":1280,"height":720,"caption":"How to annotate a website in 4 simple steps"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/how-to-annotate-a-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"How to annotate a website in 4 simple steps"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/104267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=104267"}],"version-history":[{"count":6,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/104267\/revisions"}],"predecessor-version":[{"id":201299,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/104267\/revisions\/201299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/105668"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=104267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=104267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=104267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}