Facebook Recommends using an image up to 1200圆30 pixels for the best results. The OpenGraph image can be used to control what image is displayed when your Page is shared on Social media networks such as Facebook, Twitter and Google+. You can use this to your advantage, for example your 'About' page could have a Link Title 'About' whereas the Page Title can be more descriptive such as 'About Diego Marteniz Photography'.Ĭlicking on the SEO/Social tab within the Page Properties dialogue allows you to access the Meta Description and Meta Keywords as well as giving you the ability to specify the OpenGraph image for the page in question: From the Page Settings tab of the Page Properties dialogue you can customize the Link Title, Page Title and URL of your page.ĭid you know? Link Title is used to control the name of the page as it appears on your Portfolio navigation menu whereas Page Title controls the actual title of the page as it appears on your browser tab or Google etc. You can edit the properties of whatever page you want by clicking on the Page Properties (pencil) icon as shown below:Ī Page Properties popup will open. To get started, click on the Pages section of Crevado Admin: How to Customize Page Titles and Meta Tags for the Pages on Your Crevado Portfolio: In the above screenshot the Page Title is a bit on the short side and perhaps would be betterĬhanged to something a little more lengthy and descriptive, for example "Balbao Park, San Diego CA - the nations largest urban cultural park".Īs can be seen above, the meta description plays an important role in terms of how your site is represented in search engine results.Īrmed with this new fund of information you may be wondering how you can put this to use for your Crevado Online Portfolio. The following screenshot illustrates how these tags are put to use when your site appears on the likesĪs the name suggests the Page Title is quite simply a string of text which is used to describe Most important tags concerning how your page appears in search engines are the Page Title and the Metaĭescription. Without delving too deeply in to the technical side of things this task is accomplished using tags. Is two-fold it helps create clear information of what your site and pagesĬontain when it appears in search engines such as Google and it also helpsĭescribe your page to search engines which in turn helps your page rank better How the pages of your portfolio appear in search engines such as Google. You can think of this information as and object where the property is the key and the content is the value.One of the most important things when you have built your online portfolio is to customize Each tag should also have a content property which will be the information displayed in the link preview. Since I just wanted to get my link previews working I only used these four and a tag with a og:description attribute but if you click the link above you can see the full list including optional attributes and a WHOLE lot more. Now that we know what Open Graph is, I’d like to show you how I used it for my site and why I think it’s not yet working 100%.Īccording to the Open Graph Protocol there are four required properties that you need to place in tags in the section of each web page: I haven’t done a ton of research on this but wanted to leave it here for my future self. It turns out it’s also a very effective tool for SEO since search engine bots can read and interpret this data. Most social media sites, looking at you twitter, use adhere to the Open Graph standard and take that information to create some sort of unique visual representation of the data they find. I stumbled upon Open Graph when trying to solve my social media link previews. Since content isn’t displayed by the browser and most users don’t dive into raw HTML, this is really only useful for bots that are reading your page. Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.īasically what that means is in the section of your HTML document you can add certain tags to help communicate what your site is.
0 Comments
Leave a Reply. |