hey everybody let's see oh I didn't get the chat up oops let me get the chat
going where is it where is the
app chat app is not working hold on one second oh there it
goes when end out restart the app okay boom there we go got the chat going
excellent got anybody here okay how's everyone doing today
hope uh hopefully everybody is doing just
dandy there we go okay um Mr power is in the house oh there we go now all of a
sudden I got viewers for some reason it was like stuck at zero I'm like that's
unusual um okay um there we go chat streaming in now
Bruno's in the house David
excellent Mr Scott
Pam excellent loud and clear thank you make sure you guys can hear me um
so today um um as I said in the email and on the post on the community um I
just been noticing a a trend of like a lot of people struggling with um SEO and
total CMS so I was like you know what I think it's a pretty simple topic to be honest with you um but obviously that's
me you know I it's easy uh it's once you once you know then you know you know but
um it's very easy to take for granted um knowledge sometimes right where uh I'm
like what how can you not understand that what is so is simple you know but um yeah so I thought it would be a good
time to kind of go through hey Franco how's it going today I thought it'd be a good time to go through um you know a
little bit we'll review we'll start from the basics uh just some you know these are the SEO tags that we're going to be
targeting today and looking at obviously SEO is a huge you know um
topic okay and I know we have done um live streams about SEO in the past um
where I've I've done a couple really actually in-depth ones on technical SEO so make sure you look at that today I'm
I'm going to I'm going to go over like the raw Basics and then how uh we manage it with total CMS okay okay so let's uh
share my screen voila and let's get my little Cur
dud ad going CU I know you guys like that okay so here we are on um this just a
this my sandbox project is just my my kind of like my playground project um
and uh let's uh have a gander we're going to start off actually with I know a lot of you that are here probably have
SEO helper we're going to look at that but I wanted to start off with um
many of you might not know um inside the start pack there is a free SEO Basics
stack okay um it is the basics okay um but it
does everything that you probably need it it it's not much here but it covers a
lot a lot of ground right okay so um and
I do recommend actually cuz I know we're all waiting for Stacks Pro and we're
probably you're probably thinking am I going to you know how am I going to migrate everything over from um you know
the existing Stacks classic to um you know the stacks plugin to Stacks
Pro and um if you're using rapid Weaver for managing some of your SEO tags and
stuff like that where is it here see I don't even remember where the tab is because I haven't I never use
it um you can manage some of the stuff you don't have a lot of control over it
um with rapid eaver okay um so I I recomend recommend you you just disable
everything in here okay even go into um where is it general or Advanced where is
it yeah the uh where is generate where is the
generate social link stuff isn't here oh here in general settings you generate social tags turn that off okay um and
then turn off the the stuff inside um the metat tags uh tab in the inspector
because we're we're going all in with Stacks we're going to manage it with our Stacks um and then if you do it that way
then when we're migrating into Stacks Pro you'll have zero issues okay um that's same true if you're using SEO
helper we're going to use SEO helper most of today um but I thought i' i' uh start off with the SEO Basics from the
starter pack since that has the basics pretty much it has everything we're
going to be looking at today right so um let's what are these tags and what
are they used for okay U first off is the robots meta tag and what that does
is that tells robots AKA search engines okay whether or not to Index this
particular web page okay and so um most
of the time you're going to want that right um and you could turn that off here in the settings okay but um yeah
most the time if you want to have a search engine index a page um it will index by default okay um it's good to
have it there kind of by default um I think but if you definitely don't want a particular page indexed then make sure
you set off um the index this particular page and whether or not you want it to
follow the links on the page right so those are two separate options um do you want it to index a page and do you want
it to follow the links that are on this page okay next up is the
description and this is used for um primarily in search engines when a
website when a web page comes up in search results this is the small blurb of text that shows up there okay it's
used in a couple other locations you know around the web um because it is a common tag so a lot of services will to
you know if they're scraping a web page for some other reason they could use this as the description but the primary
purpose here is the description of the uh web page inside your search engines
in the in the search results um and primarily I think it's like 160 characters you want to keep
this no longer than 160 you can have it longer but essentially it just gets cut
off at 160 characters so there you go um next up are um you'll notice that
there are one two three four tags here that all start with this OG
colon and um these are what are called open graph
meta tags okay now open graph um there are more types of open graph meta tags
but these are the ones that are important okay and um open graph is
actually a standard developed by Facebook actually um if we go do uh open
OPG I can never remember the the URL let's just search for open
graph uh there it is OPG do o o ogp
there we go I knew it was a three-letter acronym for the web for the domain okay um it was a a protocol started by
Facebook um I think it's still main I mean that technically like it's maintained by them but it is kind of an
open protocol that everything has pretty much inherited um even if uh down to uh your
iPhone you know if you've noticed now if you text a link to somebody it doesn't just have a link it actually shows up as
like a little preview okay that preview data in messages it's all open graph
data okay um on the Weaver space Community when you post a link and then you get like a nice preview of that link
open graph data okay so um that data has has literally become a standard it
started off as just a Facebook thing um but it it definitely grew to a definite
standard that is used across the web for sharing information okay um if you want
it you can dive in there's as I say uh seor supports most of this okay um there
might be some new things I don't that's why I say most uh to my knowledge it it supports all of it but yeah uh oh look
like they have some new music on that I that SEO helper doesn't have yet so maybe I should look at that for the next version of um SEO helper okay but um
here let's just close that out okay so what are these open graph tags what are
the ones that we definitely need on every web page uh first is type um now
this is going to be a website right so U this is a web page um so type of website
then you're going to have OG title this is going to be the title of your web page right so when that little share box
comes up whether or not it's on Facebook or messages or the community or any other website where you're sharing a URL
this is going to be the title that's used next is going to be a URL to an
image as you know when you share those things it does come up with an image and
so if we want to display that image uh we need to have the URL to the image now this has to be a full URL so you have to
warehouse this or as we see later on we can utilize images inside total CMS okay
but this needs to be an a URL to an actual image that will basically you
know depict the information on this web page now you can uh use the same images
across multiple web pages that's fine um if you want um if if you can put the
effort in I think it is it will be beneficial to have different images for different web pages okay um oh before I
get down into that tangent the last one is OG description okay now technically
this could be the same exact description that you have in the description metat tag that's why even in this SEO Basics
you just type your description once and it uses it for both okay so
okay SEO is a lot of work okay and I say that because all of this information
should be unique for every single web page that you have on your
website you don't want to stuff this inside of a partial and then add it to
every single web page so that every that way every single web page has the same title same description no okay um SEO is
a lot of work and the more and you will get paid dividends in it right uh with
more better SEO juice right and it's nice when someone shares a URL that they get something specific for that
particular web page so uh yeah you should really have unique titles unique
descriptions preferably a unique image I I think that would be nice but I'll admit not even I do that okay I I do
have a common image and then for particular web pages I'll like maybe overwrite it you know or and I'll have
you know specific images for specific Pages for example on Weaver space on my main web page I uh I do have
like a generic Weaver space share image I'll be honest it I have to update it it's it's not not really re relevant to
the design Weaver space now it's something that I designed I thought was cool a while ago and it's just kind of
been there okay um but if you share any of my product pages you'll notice that I
have a unique image for every single product so that when you share the image
to that product you get that image okay and um so if you're using something like
total CMS um you're going to want to make sure that every single blog post um
has a unique image okay and we'll show you how you can do that right um any questions on these
Basics uh on these basic meta tags I think we're probably pretty good to go on these right okay um just for fun
we're going to go ahead and I'm going to Chuck on SEO helper on the page uh SEO meta tags okay and if you
look in SEO helper um you know the default uh meta tag here is called SEO
Basics and guess what it's very similar it has a few other things that the the
starter pack doesn't have okay um it has a canonical URL which is nice um let me explain what a canonical
URL because actually I think that that causes some confusion okay and uh
especially with this this particular stack on a total sems blog post page okay which um I'm foreshadowing a little
bit of discussion here okay but what is a canonical URL that is the one meta tag
here let's see are there any others title image URL description okay um I do have OG URL here um as well which
essentially is the same thing as a can canonical URL um but it's the open graph version of that okay okay um so what is
a canonical URL let's go
to um let me bring up a web page here I'm just going to bring up this
um uh that's let's go to
what what I have hold on let me verify that URL one second is it was it oh blog
test okay there we go okay so here is just a
a small little demo blog right that I use for testing purposes okay and um
hilarious whoever created this photo I think it I think it was Irwin Irwin are you here I think Irwin created this
photo of me pretty funny um Okay so
as you know let's say I'm on I'm currently on a blog list page okay um
luckily enough this actually has some filtering built in okay so let's say I want to go to I want to filter by category one okay now that filtered my
blog posts cool okay let's look at the URL now okay so if we look at the URL
the URL is is now blog Das test and then has a question mark category equals cat
one okay this to Google is technically a
different web page okay to us it's the same web
page however it's just filtered by a category does that make sense okay so
what the canonical URL is let me uh let me jump back to here so
what a canonical URL is it is the Webb page that the search engines that you're
like hey I know it doesn't matter what search Mr search engine it doesn't matter what URL you think you're
at this is the URL that is the main URL of this particular web
page hopefully that makes sense so for example on that on this blog list that I just filtered out okay now maybe you
want Google to be able to index filters and searches most of the time you don't
okay um but let's say you did then um you know essentially every single URL
you might want to have different right you possibly you know want to uh let
Google think that it's different web pages okay but I think in most cases for
a blog list um you're going to want uh the filters okay to not be
indexed so in this particular case I would Set uh a canonical URL on this on
this web page to be the URL without any filters applied to
it that way if Google maybe you're linking to a filtered version of this page on a different web page and Google
follows that it's going to know hey okay I visited this blog list page um now it
it told me to add this category filter to the end of the URL but the can the
canonical URL that's in the head okay in the in the SEO meta tags it's telling me
that the main URL is this right that way
Google knows hey even uh when you're if Google were to see category equals Cat 1
category equals Cat 2 tag equals whatever it doesn't matter what filters Google knows that it is all the same web
page hopefully does that make sense please let me know in the in the chat if that makes sense to you okay um I know
that it's the canonical URL is kind of a confusing thing to a lot of people because they don't understand what it is
again it is purely telling Google or any search engine what the exact URL to this
web pages it doesn't matter what else is added to the end of the URL maybe you're using agent and you're adding some stuff
to the URL to do various things on the web page um yeah it is the URL to the
web page that Google needs to index period okay let's uh share
again okay um that's this this particular project so in this case if I were to add
an SEO metat tags onto here right um I now in this stack okay there is a autod
detect uh URL page most of the time that is going to be
exactly what you want because uh what this will do is it will um it'll calculate the URL of this web page okay
um based on the settings on the page so it'll be SL blog test
index.php right actually if it if it's index it's smart it doesn't add that okay but anyway um so yeah um but if you
turn that off you'll notice that you can actually explicitly call out a URL as well as well okay uh and this will be
required later on when we dive into total CMS okay
okay clear so far perfect thank
you all right let's go ahead uh I'm actually going on this particular web page here let's go ahead and fill this
out okay I'm just going to fill in some dummy data okay I'm just going to do um my uh blog list okay
uh um I don't have a UR I don't think I have a URL here let's just go ahead and do let me go to website testing
preview um resources maybe do I have a oh here maybe I have a resource in here
do I have oh look I have images in here okay um so here let's just do here let's do this one right so I'm going to right
click and I'm going to say copy URL okay and uh we're going to paste that in
there and is that correct that is correct cool right so there's my image URL okay um and let's just put in um
some text here you I'm going to be lazy I'm just going to put in some warm text okay wow that is a lot I told you
we don't want that much 160 characters all right let's go shorten that up a bit all right there we go I have my my
page description okay I'm going to Auto detect URL that's perfect for me and I
want to index and I want to follow links now meta values uh it's currently set to
user defined right we're going to leave it like that for now okay and uh let's
go ahead and uh publish this
page actually let me go ahead and make sure that I turn that off perfect now let's publish that again
let's refresh this page oh I don't want I don't want any
categories all right so now we're on this web page and let's look if you
didn't know um where all the meta tags let's show you where all these meta tags live obviously there not something
visible that's on the page it's like invisible data um in the web
page let's just make this bigger I don't
need don't need that for now so uh everything is stored in
something called the page head okay you've probably heard it uh that term said before and that is inside of um
every HTML page there is going to be a head and inside there has all kinds of
non-content data it's all data about the web page it's all uh it's meta tags it loads CSS files it has all kinds of
stuff okay um and this is where your SEO meta tags will live okay so uh if we
notice here um here I have the robots meta tag I have my description meta tag
and here is all of those uh OG meta tags that we added inside of SEO helper okay
and you'll notice that this is the URL to the image now again this URL to this image um needs to work right so if you
were to paste that URL in the browser it should resolve an image and and that
does so cool very good here's my description here's my OG
URL okay if you look OG URL and canonical URL um they're set to be the
same thing okay again OG URL is just a the the same thing as a canonical URL is
just for the open graph World okay uh canonical is for search engines
OG tags for search or social networks and websites and all that stuff okay so
what is this data it is preview. joormann blog test and if we look at the
URL of this web page that's exactly what the URL is okay now if I go to Let's
sort by something right so here I'm sorting by category one or let's do tags of database right if you look at my URL
here we have uh blog test tag equals database but if we look inside the head
okay my canonical URL is still set to just be blog
test hopefully that makes sense okay
now let's start diving into um total CMS a little
bit and um and what we can do uh with total CMS and
SEO so first off let me just let me back up a little bit and let's think about
what is total CMS okay um what does it do how does it work okay and it's very
very simple okay I know some people think they hear the term macro and they they hear all these things and then
they're they're like they're they pulling their hair out if you have any and then you know your head
explodes okay so let's break down total CS into essentially like the basics of
what it does okay and
um so here's an HTML page this is the same page we've been looking at right and
what is a web page it's a bunch of
text that's that's liter I mean the source code of this web page is a bunch
of text okay um this this is what the browser
reads okay and then it obviously it has a bunch of little things like these little tags that mean special things to
the browser and then the browser will do stuff okay but for all intensive
purposes a web page is a text document you could open this web page up
inside text edit the most basic text editor on all of our Macs and you can change it
okay so for example let's say um this this description here's the description
meta tag right here okay right let and let's say I wanted to
I wanted to manage this this description with total
CMS how does total CMS get that into the
document okay well let let's do that really really quick okay um now I don't
have like all of this set up maybe I should have done that but
um here we I will do one very simple little thing okay um uh bear with me
while I take two seconds just to add in a a text field okay so let's Implement
something with total CMS so I'm am just going to go into oops I don't want to 3 I want version there it is all right
so an admin um I'm just going to add a uh a text box in here okay I'm going to add it below this blog list okay and um
let's just call this uh dis uh description I'm just going to
call it description okay and we're going to make it a plain text editor um and yeah we're good okay uh
that's all I'm going to do I'm just going to call it description
okay um and let's go ahead and publish
that okay and I don't I don't even remember the URL I set to this page blog
test admin okay um so we're going to go off into
um okay so in here I didn't add any margin but whatever I have a text box in here and we're going to add a little bit
of text actually let's type something in so it's different
than hello live stream I hope you are
learning something today right so here I typed that into total Cs and I'm saving
it okay it's saved okay so I saved this bit of text into total total CMS you
don't need to know how it does it or what it did I saved a bit of text into
total CMS okay um now let's go back to uh the page
I was on which was this particular one now I I want to get that text that I saved into total CMS okay into
here right into into here so how can we do that so we have
these scary things called macros okay and um it just allows you to get the
text from or content of total from Total CMS and put
it where I would have typed the text on my web
page right so I'm going to use something called uh percent
CMS uh CMS data and then we called that text if you
remember I gave it a name of description okay so I'm going to go ahead and say description if I can type that correct
yes I did okay so there it is there is the scary
macro okay oh no I'm not sharing thanks my dad
just texted me okay hate when I do that okay
thanks Dad um all right really quick uh I I just
went into the admin page here I added a text box um down here I gave it a name
of description and I published I went online um to that text
box that I just published and I saved it okay just see here I can put two more
exclamation points and I saved it okay um
then uh now I'm back into I'm going to Let's command Z out of that okay so now
I'm back here okay so I just saved this bit of text into total
CMS actually you know just for fun I'm going to completely redo that all of it
right I'm going to delete this right I'm going to save it right and then uh yeah
let's just pretend it didn't it didn't exist I'm going to add that back there okay uh I want to add some margin
because I let's just do uh [Music] mt32 okay sweet
um and I'm going to give this this text box a name and we're going to give it a description name
description okay and then uh we're going to publish
there we go now I have my text box oh I made it style text I just want it plain text we just want plain text I don't
need um uh that's actually a good thing if you're doing SEO okay um you do not
want style text okay man my everyone's blowing me
up now um you do not want style text uh because style text produces HTML
L let me just turn on do not disturb now okay
um and we don't want HTML inside of our meta tag we want plain text okay so I'm
going to change this to be from uh style text to uh text markdown I'll turn off the markdown formatting doesn't really
matter uh and let's publish that
again all right so now I have my plain text box oops I thought I called it description
desri description oh I must have spelled it wrong before
description okay yeah okay I must have spelled it wrong before uh let's just type this
again hello everyone I hope you are
uh learning something new right and save done all right so I saved that
text then uh we're going back and I want to take that text that I just saved and
I want to inject it right here instead of me typing that text here I saved it
into the CMS so how do I how do I get that data
from the CMS and add it into this description okay uh CMS has these scary
things called macros and uh I'm going to add one in right now I'm going to do percent CMS
data um and then
description okay there we go there is the scary macro CMS data description because that
that is the ID that's the name that I gave that bit of text
okay uh let's go ahead and publish that
now and let's go back to blog
content now if we look in the page head here I should see boom in my description
I see hello everyone I hope you are learning something new okay now that's what the browser sees let's really quick
let's go into um well all this is on my local machine right so let's just go let's look at this so here is my index
uh PHP page okay and let's open it in a text editor just so you guys can see hopefully I'm not going to scare anybody
here okay just remember this is just a text document it's nothing scary okay
um where is it oh that's not I didn't do it on that page it's on a different page I did it
in is blog test blog test index okay
boom right if you see here so this is all the
meta tags from SEO helper okay and there it is it does not have anything there on
publish this is on our server it it has this little macro okay now you don't need to know
how it all happens but once you visit that web page in the browser what total CS does is it just it takes the text
that you uh that you typed and saved into the CMS and it replaces that macro
with the actual content done okay now if let's say you can now
you can add stuff to this you can be like um
hello world okay I I'm I can mix and match right so you can put in some static
content it's only going to replace where um that macro is with the content right
so let's go ahead and uh here let's publish that again let's publish just so you can see
again I added in um a little bit of static text and you so you can combine
your own content with the content from
CMS okay hello world hello everyone I hope you're learning something
new see that right
there okay um I haven't shown anything Earth
shattering yet I think most people that have uh you know a little bit of experience with total CMS that is
nothing new okay um but I just want to kind of show you the raw basics of what
total CMS is doing okay now there is a setting here that trips some people up
okay um inside SEO helper there is a thing called metav values total
CMS okay and what this does um in hindsight I'll be
honest I probably shouldn't have added this feature okay cuz it it is
confusing what this does is it it um it assumes that all the textt that you've
that you type in here is going to be stored in total CMS so and what you you
don't need to put in the macros you only need to put the CMS IDs so here you would put in um
description and then but but you also have to put something in here you'd have to put you know image and then that
would have to be something that's stored in total CMS and this would have to be title okay um I'll
admit this is confusing okay the next version of SEO helper um that will come
after sta Pro is shipped okay um th this feature is going to be gone uh just use
I would recommend just stick with user defined okay and um and just do it how I
did it before with the macros oh interesting it doesn't
undo it didn't undo my my typing here whatever okay you guys knew it was there
before interesting I've never seen that before okay so yeah just stick with the macros keep this at user defined okay
and uh and we're good to go okay um cool uh if you wanted to uh you can
also do uh you know an uh image managed with image URL okay um yeah let's
quickly do that too for fun okay so I showed you how to manage a bit of text okay we can do the same thing for title
uh we won't worry about that right now okay let's go into here um I'm going to add in so that was description okay I
need to add here let's add in another bit of text actually let just do
this uh copy paste um so this one we're going
to make this one um title okay and I just want this one
line okay um
and then we're going to want an image right and let's just call this
um SEO image how about that oops SEO image okay now I'll be honest
what you're probably going to want to do is instead of using very generic names like I'm doing here like title and
description and you know let's just keep let's just say image okay you're probably going to want to do like you
know uh home Dash title um you know if it's the homepage right home-
description and stuff like that okay so make sure that your cmsd IDs are descriptive and specific okay so
hopefully that makes sense so here I'm just going to do uh CMS ID of image and yeah we'll keep the the
defaults is fine and let's go ahead and publish that
all right so here we're just going to say um live stream
um page title okay um let's save that
and then I'm just going to drag and drop an image in voila so I've saved I now have a
title a description and an image okay so how do we get all of that
data into uh into to SEO helper okay um by the way I I'm using SEO helper here
same exact concepts are in the starter pack SEO basic stack just use the macros okay um so yeah uh we're going to do
let's see that was CMS data description uh up here the title since I added that let's go ahead and do title there okay
now um image URL how do we get that okay so uh to get into there uh let's just
quickly I have a CMS cor somewhere on this page but I'm just going to go ahead and cheat here so in the CMS core
stack there are these are all the various macros that you can use okay and
um you'll notice that these are total CMS path macros here at the bottom so what this is going to do is it's going
to resolve the path to an image okay now um here we want this uh
CMS image and it's going to resolve a JPEG so I would do CMS image and then my CMS ID percent okay so let's do do
that I'm going to do percent CMS image and my CMS ID was just
image okay so there we go now um I know this is going to break but I I'm let's
publish it and you'll see what's going to [Music]
happen uh Bruno we're going to get to blog in a little bit uh blog will be next going to be
where we wrap up
okay so again we're on this page and let's go into my page
head so here's my title I think that makes perfect sense um here's the image
okay and then my description now what's wrong with this image um if you'll notice it doesn't have the
URL okay um it just has the path to the image
that won't be enough um this must be a full URL to an image remember I said if
you copy and paste what the content here it needs to resolve an image if you
paste this into a new browser window okay so uh there's two things that we can do up here I can just go ahead and
do um you know uh my I can type in my domain so I could be like https
colash preview. joormann net okay so I can do that so let's um
let's publish
that so again inside here I did my domain and
then was the
macro right and let's look at the results of that so there we go here's the results I have preview. j.net CMS
dataimage image. JP Peg okay let's copy that remember if I
were to open up a new tab with the URL to that image it should work and it
does now from now on I can just I can re-upload a new if I want to update this
image I just re-upload a new one into total CMS and this magically changes I don't need to do
anything okay pretty cool now um I know there are a lot of people out there that
you know you are going to publish this particular site to let's say a test subdomain before you ultimately get it
on a production domain um after you're done and uh normally what it would be
nice if you could just set the domain inside your project okay and then um not have to
worry about any other URLs throughout your entire project okay so uh what we can do is
instead of putting in preview. Joe work.net what I can do is uh this is now
this is a rapid Weaver specific URL okay I can do uh percent basore URL percent
okay um so there we go base URL percent and then my macro so now I have two I'm
using two macros I'm using one that's in Rapid Weaver it's actually from the Rap weav Theme API okay and then after that
I'm putting in um the CMS okay so now if I were to publish
that okay what you notice is I now have the URL um you know just as we had before okay um one little caveat okay
I'm not sure I I know we're we're currently in limbo between rapid Weaver and and sta Pro and I did say that this
base URL macro is a rapid Weaver macro it is okay
um they're currently isn't a macro that a that you as a user can use
to access that data in Stacks um however um I I do feel that it's something that
um is high on my priority list to get in added to Stax Pro um because I know a
lot of power users do leverage that okay um so yeah it probably will change
for Stacks Pro again this base URL percent thing is a rapid Weaver thing
okay um so yeah and there currently isn't a version that I can teach you right now in Stacks Pro um but uh I I do
think that we will have something like that eventually okay um so there we
go hopefully let's see let me see if there's any questions let's see blog does the open graph image need to be
specific file typee I think jpeg um okay so yeah jpeg I mean it doesn't have to
be J I think PNG will work as well and does it have to be a specific aspect
ratio no um there are Facebook wants a part if
you want an image to not be cropped when it's posted to Facebook they have a
preferred aspect ratio I don't know what it is off the top of my head okay um he put 1.9 to one um that could be true um
I don't know what that aspect ratio is however all across the web it's it's all
kinds of stuff some some use Square images when it looks at your OG It'll like crop it and it'll put a square
version um there is no real way to control what a um a service does with
your particular image I personally put in 1080P images okay so all like when I
share um my product images on Weaver space they're all um 1920 x 1080p okay
so 1920 x 1080 it's just a very that way I can use that I can leverage that same
image for you know thumbnails on videos for I use it for social sharing I use it
for all kinds of stuff right and just a very common size and when that that
image is shared on Facebook I mean Facebook does crop a little bit of the outside to get it to fit into their
little share thing that they want um but it still looks good okay so yeah I
personally use again 1920 by 1080 um that's what the Shar uh images that I
use and I noticed that every now and then like even on on the I think it's on the community um it'll do a square crop
and sometimes some images don't look great Square cropped but you can't
currently Supply multiple um you know images like you know you don't know what
a particular website's going to do with your image if they want to implement it some other way right um so you just have
to supply something now what I do try to do is when I create my product social sharing
images I I try to think at least about that situation where something's cropping it normally when it's cropped
it crops off to the side okay and so I I try to make it so the focal point and
most of the data that I want to portray is in the middle of the image image okay
so that if it does get cropped it's still usable hopefully that makes sense okay good question thank
you uh when you have used Bas Cal you got the double uh oh yes that is true Stephen uh I I I didn't notice that but
that is true uh when you use the Bas URL with the macro it it will get a double
uh yeah it does however uh actually browsers work pretty well with double slashes um oops that's not what I wanted
uh I want that so if we here I'm going to type that in with a double slash and it still resolves okay um yeah um it
technically is an extra slash but it does it does work okay um it's I I I
would I personally would just probably type in my domain in here um that's how I would probably do it hopefully we
again we'll see what Stacks Pro in terms of macros what it has for us uh hopefully we have a little bit of control over there okay
um cool and obviously actually with to in total CS 3 we have all kinds of cool stuff we could do but anyway oh I guess
another option uh would be you can actually I know some users do this as well okay um is they have another text
area that is like um that stores the website URL in total CMS right so uh imagine this was just um
right this you know this field here was we website URL and you just stored in
your url okay and at that point you can then put in a total CMS macro here that
would then store you know it'll populate the URL of the web of the domain and then your url image
okay so there we go okay um I think we answered All Those
Questions uh let's dive into blog now okay so um with blog uh the important
thing is the blog post page right um let's go ahead and just click into into a blog
post so um let's look at now this page doesn't have any SEO on it again this is
just my test site so let's add it actually let's add a new one on a
page I just noticed the time work man I I I talk a lot Jesus I talk a lot okay
um so here we have a default meta tags okay now tell you right off the that um
I know a lot of people will um publish this with the Canon with this
autod detect this canonical URL on a blog post page and this is going to
break your social sharing 100% right I see it all the time
how do I know it's I how do I I know for a fact just by seeing when shelman shares a link let's see if I can if I
can find one I don't want to call someone out but but let's go find one on the community
okay actually it was I here actually uh it might be fixed now because I know he
I think he fixed it but let's see if it's still there because sometimes this community posts uh cashes stuff so we're
going to pick on Chris really quick because I I know he'll he'll take it take it like a champ on the
chin okay um he posted a link to
where is ah he fixed it all right he did fix it you fixed it
Chris all I hold on let me let me bring up um hold on one
second uh I think I sent him my screenshot of
it one second Chris boom right uh how can
I uh save image or does it save it save
it to downloads thank you right right boom all right this is kind of tiny it's
not not the best of screenshots right but uh and actually this isn't the exact
um thing that I was thinking of actually
um what you'll notice here is it says blog title right it's it has the macro actually no this is this is the the
problem okay um it has the title instead of actually displaying the title of his
blog post I see the CMS macro now why why would that be okay and
let me show you exactly why that is I'm going to show you this other
image sorry if I'm abusing you Chris
okay okay right let's go to this is on Stacks Guru okay um let's go to Stacks
Guru really quick so um the OG URL his canonical URL
is what was hurting him here okay and that's because he had it um he
had it set to uh Auto detect I think okay um let's go to stack Guru really
quick Stacks guru.com
okay and um let's just pick a video okay so here's a video okay and let's look at
the URL okay the URL here is whoops URL is
Stacks guru.com and then the peral link
okay um so if you if you look when I when he shared when he shared he didn't
share this particular one he shared a different one but it's it's fine it's the same concept if you notice the OG URL here is not the URL of the web page
right let's let's let's see if Chris has fixed it okay um if we look here the OG
URL now on this web page is stx.com and then popup caption blah blah blah blah blah blah blah right the actual URL okay
um however um if you notice if we go to
post.php all right okay if you notice this web
page there's nothing right and um this is sta
guru.com post.php
what is this web page okay and and if we look at the meta
tags for this web page look look title is blog title right
if we go and find any of the other I'm not sure where the other OG URL stuff is
but anyway there's blog title right not there right because um this page right
let's let's talk about how blog works okay um so let's now that now that I've
kind of stated the problem right let's go ahead and close that out and
um thank you for being an example Chris I appreciate
that so here on this particular project I have uh if we look at the path this is
blog test post.php this is the blog post page okay it is let's go to this
particular demo site
right this is if I click on this web page I get this this blog post this blog
post is this web page right however if we look at the URL
here um it it passes a peral link okay if I delete this this peral
link from the URL it I just have a blank page because I didn't tell total CS what
blog post to load therefore it just gives me
nothing right because I didn't give it anything hopefully this makes sense if
what I'm saying needs further clarification please let me know in the chat so so basically I need to be able
to pass the blog post permal link to the URL in order for this to all
work right so um now that we know the
problem what's the solution okay so the problem is um did I did I publish this I
did not publish let's publish SEO helper to this page which just all the default information it's
fine all right done all right so I'm going to refresh let's look at the the web page right if you
look here where
is heck where is
it did I not what the heck that's weird just pop it there
what what's going on
here none of my Mena tags are popping up what's going on here what did I do wrong
blog test post to Local Host oh I'm on my I'm on different wrong
domain sorry how did I get how did I do that that
weird all right sorry about that all right now I'm on the correct oh how come
I oh when I click oh my blog post URL that's funny that is funny okay sorry I
I copied the CMS data from from my different domain to this domain and the
oh let me fix that really quick give me give me two seconds I'm just going to fix it
actually if we technically if I preview
this whatever uh let's just fix it
locally website testing preview CMS data Blog blog I think
uh and I want base URL
with oh set to that what the heck is this not
blog man what I do here log test did I mess up something
here
it's not a custom post URL I think the problem is I I'm
publishing this same project to multiple locations I've never had that issue before very interesting whatever we're
just going to click through into it all right and we're going to just do setad of live debugging just fix it
preview boom all okay here is the web page
locally and if we look at the head okay um um we will see
that uh where oh here OG URL and economical URL okay if you notice these
are set to be preview. j.net blog testpost
PHP and that is not the URL to this web page right URL to this web page has a a
permal link and all kinds of stuff right added to it so what's going on here and
if I if I visit this this this URL all right it'll be like what we saw before
right right be nothing and if we look at the meta tags there okay um well it
we're not injecting any of the meta tags from Total CS yet right but it has all the default stuff right so it has
nothing specific okay so like what what's happening is is if I shared this
particular blog post to any Social Service even though I shared this URL
because the meta tag here says use this URL instead it's going to get all of the
data from this URL to to create the share data that's why in um the screenshots I showed you
of Chris's stuff it said like you know it showed the CMS macros okay because this URL was not
correct so how do we fix it
there's two things to fix two things we can fix actually first off um actually I want
to I want to I'm going to actually turn off SEO helper okay and one thing you
can do for basic stuff is in the blog post stack itself
you'll notice here that we can actually add description Facebook uh we can we can add all the various metadata
directly from the blog post stack okay um so here I would add like you know Joe
Workman okay um actually Google+ is kind of a a dead Network you probably don't even need that you can add it though it
doesn't hurt but okay let's publish
that okay let's refresh this page okay and if we refresh let's find
it uh here it is so here we see that we have the
description we have the URL we have the type the title description the the
what's cool is it actually automatically gets the image from the blog post and puts it in there okay and all the other
there's Twitter and all kinds of other stuff right but as you see it the blog post stack does everything for us we
don't actually even need SEO helper or the uh the other SEO basic stack at
all because yeah if you're good with just uh it takes the summary from the
description uh it well takes the summary from your blog post adds that as the description it takes the uh image uh
from the blog puts that as the share image it obviously takes the blog post title and puts that as the title right
and we're done right and it does that for all the various social
networks so the simplest way for a blog post page is just to check all these
little buttons and you're done right but let's say you wanted to be like super stringent and you wanted
to you know have more control uh over than o you know over what total CS does
for you out of the box okay so let's let's do the SEO helper way as
well so um again Blog has macros okay um they're different than
the other macros um and if you go to the blog post stack okay and you go to this little do dad
down here you can do blog macro hints and there's all the various macros that we can do to inject data um into SEO
helper or anywhere on the web page actually right so uh if we see here there's blog title there's also blog
title strip HTML because let's say you add HTML to the title possibly and you want to make sure that that could
stripped another thing is summary right um if you're using hip wig or style text
remember I said earlier you don't want to use that for SEO stuff okay so we have a um a macro that will actually
strip the HTML from the summary um so that we can inject that into our
description if you're using a style text area if you're just using plain text then you could just use blog summary
right here okay and the image path stuff you'll see that there's blog image there's all
kinds of stuff if you want to do the first image from a um a gallery you can do that as well right so there's all
kinds of image path macros so in here what we're going to do
is um for title uh I would do percent blog
title right um and then for description I'm going to do percent blog
summary I don't think I'm using hip wig for this test blog but um but if you
were you would just put blog strip HTML right so blog here I'll even do it blog
summary strip HTML so it would be um strip HTML oops if I can type
HTML okay and then the image URL so uh I'm going to use the blog image so we're
just going to do blog image right so we're going to do uh now I do need to do
the let's say if I have this right then so I'm going to do
preview. Joor net percent blog image parentheses percent so that will
uh the image URL will now resolve the URL to the blog image now we're going to
want to turn off autod detect URL because um it doesn't work for blog
posts we need we need to make sure we need to take the permal link of the of the post or the post that's getting loaded into account right um
so what we're going to do is we're going to do uh preview. joe.net blog test okay
SL now if you're using uh pretty URLs I don't have it configured on this
particular web server um but I'll show you what you would I think most people do use it um so what you would do
without it let's do without then we'll do with with pretty URLs so we'll do post.php
question mark peral link peral link equals okay now um here
let's uh I'm going to copy this and let's open up a new editor
here okay just so we can see this
right was that close close close whatever doesn't want close um okay so
this is the URL how do I know that this is the URL Okay so if we go to the web page and we look at the
URL let's copy that paste right R oh apparently I no I
did it right okay so we have again every blog post is going to have this base to
it the only thing that's unique to it is at the end of the URL we put in the peral
link okay and guess what there's a macro for the peral link so what we're going to do it now is instead of typ in a
macro or instead of typing in the peral link we're going to do percent log uh Perma link there we
go it actually needs a little these little dads okay so now what I can do is I'm
going to copy that and we're going to put that inside of the
URL hopefully that makes sense so now I'm going to publish that
let's refresh this page okay and let so
now uh where oh here they are right so here I have my test blog post which is
what this is okay I have the URL to my image okay just to verify let's copy
that paste that in there is the image cool that works um I have my description
and if it was using hip wig it it's now just plain text done and if we look at
the URL oh no oh I spelled permal link wrong haha helps if you spell it
right blog forgot the r peral link there we go
let's publish that again
refresh there we go so now now I have my URL and my canonical URL has permal link
equals my test post and if I were to copy that right and um paste that into
the browser obviously that gets me the web page okay so uh what if you what if you're using pretty URLs so if you're
using pretty URLs um you would build this slightly differently let me fix that macro okay now let's say here let's
look at this bottom let's move this up okay so this is My URL to my blog post before if you're using pretty URLs it
would look like that okay hopefully that makes sense so
essentially now we just need to analyze okay what in my URL is specific to a blog post it's the ID right here and we
know how to get the ID it's with that macro so what I want to do is I would just replicate the URL and where the ID
goes the macro goes right okay so now I would take that and I would paste that
into uh my
settings and if I were to publish
that and refresh you'll see now my pretty URL or my my canonical URLs are
the pretty URL version now I don't have pretty URLs again I don't have it configured on this particular uh site
so that's not going to work for me um but if you were using pretty URLs that's how you would do that then every single
blog post would get its own dedicated canonical URL um inside the meta
tags okay um and with that guys pretty much done I
I hopefully I didn't I didn't cause too many new new gray hairs for you um again
for blog post the simplest thing really is just utilize the one that's just built into total CMS it just does
everything for you okay um but if you wanted control let's say I know some people let's say for like the title
instead of having just the blog post they want to put like you know um you know my blog Dash and then the blog
title right something like that um if you wanted to do that you can right with
SEO helper right you again it's just just putting in your static text and you can mix and Max these mix and match these
macros um with your own text and uh it will work just as we did in the URL how
you know we provided some of the URL ourself and then only the dynamic Parts did we put in the macro uh that we
needed if you use the built-in tags will it adjust for pretty
URLs if you use the built-in yes it will uh yes so yes if you use uh because it
knows whether or not you're using pretty URLs um the stack knows because you would set this to be pretty so it knows
whether or not to make it pretty or not okay so there we go good
question uh let's see did I miss any others uh does open gra uh nope I think I
answered everything cool um so yeah so that uh that pretty much does it I hope hope this hope this was a
decent explanation um I tried to go down again down back down to the basics um so
you guys kind of understand how everything works under the hood again I think the macros confuse people they
scare people but all it is is just what wherever you put that macro it just
takes the data from Total CMS and it puts it as if you were to type it statically right um so so yeah and these
uh The Meta tags you should have them on every web
page uh I know a lot of people don't um and uh yeah also another good tip was
staying away from the just use userdefined if you're using SEO helper don't try to use the built-in total CMS
integration it was a great idea at the time when I made it I thought it was clever sometimes being clever is is too
confusing right so uh just stick with the uh user defined use the macros okay
um I think it's just best that way um cool excellent guys um yeah sweet I
think that's it for the day I hope uh hopefully you uh you learned something new or if you didn't learn anything new
maybe just reestablished your uh um you your knowledge that you are a knowit all
not okay guys sweet I hope you have the great rest of your week great rest of your day go out there build something
amazing make sure you come out on Friday to our Hangouts and uh check out something new uh I'm sure I got
something new to share by uh by Friday um total SE I know we talked about total seus one today um actually a lot of what
we shared today will still be applicable in total CMS 3 the macros will just look
different okay um but all the the base knowledge that we learn today is identical um in total CS 3 um again it's
just the syntax of the macros is vastly improved in my opinion okay um and yeah
uh good impact update if you saw that email uh that was that was a good update Bento update as well this week I'm
actually probably probably going to send out an email maybe tomorrow about that um uh just everyone who doesn't know
about Bento uh not enough people know about Bento uh I think it's a cool little stack so start using it more um I
really love the areas stack actually um it's for for simpler things like um like
I did in the hangout last week um and uh yeah it's really cool and with the
updates that I did this week uh with Bento 1.6 um I I think it's just a great little stack um and yeah you can do some
really cool stuff with it stuff that would be very difficult otherwise relatively easily so check out Bento as
well cool guys have a great rest of your week we'll see you on Friday at the Hangouts if not we'll see you on the community take