How To Use document.DesignMode To Edit Chrome

Transcription: 

Hi, I’m Chris Long with Go Fish Digital and welcome to another episode of “60 Second SEO”.

Today we’re going to talk about how you can use the document.designMode command to really make any edits you want to a page to adjust the design to really help better showcase what some of your SEO or design recommendations might look like and really just help better manipulate pages how you want them.

So let’s say I’m on Allrecipes here. What I can do is if I wanted to make a design recommendation or really just show how something’s going to look more as the end result, I can use document.designMode.

So I’m going to go here, I’m going to right-click and click “Inspect”. And then once DevTools is loaded, I’m going to go to the console at the very bottom here. I’m going to type in document.designMode and then it’s going to populate and it’s going to have it say = "on". I’m going to click that and click Enter and then I’m going to X out of this.

And then what you’ll see is I can actually start making edits to this page. So here I can go to instead of “Waffles”, I could say “How to make waffles” or I could start removing text here. If I wanted to see an example of maybe how this page looks like without these share buttons. I could actually go highlight them and then start deleting them just to give a better idea of how it would actually look as a new design.

So this is really great, especially if you’re making design changes or even just simple text changes. If you want to be able to get better buy-in, you can use document.designMode to really showcase to the end key stakeholder what the final result of the changes you’re going to make are.

It’s a great way to make any page instantly editable within Google Chrome.