meta tags for album sets

JimR · 2017-12-01 00:20:39

For albums, the "page copy" within the Lightroom publisher panel is used to set the meta tag for description. That's also being used for the open graph description.

I don't find this to be true for an album set. The meta and og description are empty.

Also the open graph image and title tags are empty.

How do we set these tags for album sets?

I tried using the ttg_head hook function in the PHPlugin, but this doesn't replace the head it concatenates to the end.

Last edited by JimR (2017-12-01 01:00:22)

JimR · 2017-12-01 07:27:55

I tried a few ideas for adding this, but I've concluded adding the meta data is too deep into the core of Backlight. So I started looking at the code.

I think I see why this is happening, but I'm not that familiar with the code (but I'm getting more familiar each day LOL)

In /backlight/modules/pangolin-page/dynamic/view/page.php the open graph variables are set according to a few if-else blocks including: photo, album, and "content."

The final else block only includes the statement $tt_card = 'summary'.

I didn't see the case for an album set, which I believe would be ENGINE_TYPE_AUTOINDEX.

Last edited by JimR (2017-12-01 08:49:58)

Matthew · 2017-12-01 12:16:10

Sorry, we haven't looked at this in a while. Most of our implementation for social media is focused on albums, so there's probably room for improvement on album sets. I'll need to dig back into the code myself before I can say much about it, though.

Matthew · 2017-12-01 16:24:59

Okay, have looked into this. There's not much available for top-level sets apart from the title. For child sets, we have the full array of data as for albums. So I'm setting data in place for next update, which will probably come quickly, as I have bug fixes needing to come out as well.

JimR · 2017-12-01 17:22:43

Sounds promising.

Using the "main copy" from the album set template is good for the description. Drawing on other attributes such as title should also come from there. Not sure about an image, but I"m good with the choices I see "as is" from the included albums thumbs.

You can send me a beta to test for feedback. Not sure how many others even know what we're talking about

Last edited by JimR (2017-12-01 17:32:29)

Matthew · 2017-12-01 18:44:00

Leaving the description blank for top-level sets; not pulling the main copy. Reason being that the OGP tags are a part of the page template, and render before we start pulling data from the child template. I'm not keen to upset the order of things to the extent that it would take to pull that information so early on.

We're planning to try to package the release tomorrow sometime, as Ben is out this evening, and I'm heading out in just a moment. If you'd like to test-drive the code before then, though, you can paste it in from below. You've already found where it goes, so here it goes, including wrapping comments so that you can easily identify the start and end points in the file. If you get to try it, let me know how it works for you.

	<!--	Open Graph Protocol **************************** -->
		<thp>
			$tt_card = $og_title = $og_description = $og_image = $og_image_url = $og_image_width = $og_image_height = $og_image_type = '';
			$url = URLHelper::currentPageURL();

			$childType = '<?php echo isset($child) ? $child->getType() : ''; ?>';
			if (isset($photo)) {
				$og_title = $photo->hasMetadata(Photo::$PHOTO_TITLE) ? $photo->getMetadata(Photo::$PHOTO_TITLE) : $photo->getFilename();
				$og_description = $photo->hasMetadata(Photo::$PHOTO_CAPTION) ? $photo->getMetadata(Photo::$PHOTO_CAPTION) : '';
				$og_image_url = $og_image = $photo->getUrl('photos');
				$og_image_width = $photo->getPhotoWidth();
				$og_image_height = $photo->getPhotoHeight();
				$tt_card = 'summary_large_image';
			} else if ($childType == GenericEngine::$ENGINE_TYPE_ALBUM && isset($album)) {
				$og_title = $album->getTitle();
				$og_description = $album->getDescription();
				$og_image = $album->getBestCoverImage();
				$og_image_url = $album->getBestCoverImageURL();
				if ($og_image && is_file($og_image)) {
					list($og_image_width, $og_image_height, $og_image_type) = getimagesize($og_image);
					$tt_card = 'summary_large_image';
				} else {
					$tt_card = 'summary';
				}

			} else if ($childType == GenericEngine::$ENGINE_TYPE_CONTENT) {
				if (isset($album)) {
					$og_title = $album->getTitle();
					$og_description = $album->getDescription();
					$og_image = $album->getBestCoverImage($album->getPath().'/');
					$og_image_url = $album->getBestCoverImageURL();
					if ($og_image && is_file($og_image)) {
						list($og_image_width, $og_image_height, $og_image_type) = getimagesize($og_image);
						$tt_card = 'summary_large_image';
					} else {
						$tt_card = 'summary';
					}
				} else {
					$og_title = '<?php echo isset($child) ? preg_replace('/\'/', "\'", $child->getTemplate()->getTitle()) : '';?>';
					$tt_card = 'summary';
				}

			} else if ($childType == GenericEngine::$ENGINE_TYPE_AUTOINDEX) {
				if (isset($album) && $album->getType() !== 'topLevel') {
					$og_title = $album->getTitle();
					$og_description = $album->getDescription();
					$og_image = $album->getBestCoverImage($album->getPath().'/');
					$og_image_url = $album->getBestCoverImageURL();
					if ($og_image && is_file($og_image)) {
						list($og_image_width, $og_image_height, $og_image_type) = getimagesize($og_image);
						$tt_card = 'summary_large_image';
					} else {
						$tt_card = 'summary';
					}
				} else if (isset($album) && $album->getType() === 'topLevel') {
					$og_title = defined('PAGE_TITLE') ? PAGE_TITLE : '';
					$og_image = $og_image_url = $og_image_width = $og_image_height = $og_image_type = null;
					$tt_card = 'summary';
				} else {
					$og_title = '<?php echo isset($child) ? preg_replace('/\'/', "\'", $child->getTemplate()->getTitle()) : '';?>';
					$tt_card = 'summary';
				}

			} else {
				$tt_card = 'summary';
			}
		</thp>
	
		<!-- http://developers.facebook.com/tools/debug -->
<thp> if (isset($og_image_width) && isset($og_image_height)) {</thp>
		<link rel="image_src" href="<thp>echo $og_image_url</thp>" />
<thp> } </thp>
		<meta property="og:description" content="<thp>echo $og_description</thp>" />
<thp> if (isset($og_image_width) && isset($og_image_height)) {</thp>
		<meta property="og:image" content="<thp>echo $og_image_url</thp>" />
		<meta property="og:image:width" content="<thp>echo $og_image_width</thp>" />
		<meta property="og:image:height" content="<thp>echo $og_image_height</thp>" />
<thp> } </thp>
		<meta property="og:site_name" content="<thp>echo $siteTitle; </thp>" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="<thp>echo $og_title</thp>" />
		<meta property="og:url" content="<thp>echo $url;</thp>" />
		<?php 
			echo trim(__c('FB_ADMINS')) ? '<meta property="fb:admins" content="'.__c('FB_ADMINS').'" />' : '';
			echo trim(__c('FB_APP_ID')) ? '<meta property="fb:app_id" content="'.__c('FB_APP_ID').'" />' : ''; 
		?>

<?php if( trim(__c('TWITTER_USERNAME')) ){ ?>
		<!-- https://dev.twitter.com/docs/cards/preview -->
		<meta name="twitter:card" value="<thp>echo $tt_card</thp>" />
		<meta name="twitter:creator" value="@<thp>echo trim(__c('TWITTER_USERNAME')) ? __c('TWITTER_USERNAME') : '';</thp>" />
		<meta name="twitter:description" value="<thp>echo $og_description</thp>" />
		<meta name="twitter:image" value="<thp>echo $og_image</thp>" />
		<meta name="twitter:image:src" value="<thp>echo $og_image</thp>" />
		<meta name="twitter:site" value="@<thp>echo trim(__c('TWITTER_USERNAME')) ? __c('TWITTER_USERNAME') : '';</thp>" />
		<meta name="twitter:title" value="<thp>echo $og_title</thp>" />
		<meta name="twitter:url" value="<thp>echo $url;</thp>" />
<?php } ?>
	
	<!-- /Open Graph Protocol **************************** -->

JimR · 2017-12-02 04:13:12

Matthew wrote:

Leaving the description blank for top-level sets; not pulling the main copy. Reason being that the OGP tags are a part of the page template, and render before we start pulling data from the child template. I'm not keen to upset the order of things to the extent that it would take to pull that information so early on.

That's a bummer, because the album set I was talking about is at the top level. It's the main photo page that I'm wanting to add the open graph tags.

As an example, I'd expect to find the OG tags for these locations.

http://theturninggate.net/galleries/
http://www.rodbarbee.com/galleries/
http://danielleu.com/galleries/

I'm especially after the <meta name="description" > tag because that's what search engines are looking for.

I can confirm a child album set is working.

JimR · 2017-12-02 04:21:05

Back to my original request, how can I set the <meta name="description" > tag for an album set (that is at the top level, or the main gallery page for most everyone).

Also desirable is to set the og:description tag.

Is there a way to to this for an album set at the top level?

Matthew · 2017-12-02 11:57:36

At present, there's no way of putting such information into Backlight for top-level galleries. The top-level gallery is an odd duck, in that there's no way of interacting with in via Publisher.

One thing you can do -- and this maybe isn't ideal, but it would effectively get you what you're wanting -- would be to eliminate the top-level from your exposed site structure. So, make a child set -- we'll call it "Main" for lack of a better name -- like this:

galleries/main

Thereafter, put everything into Main; treat and use main as your top-level set.

In Backlight's settings, Backlight => Publisher => Top-level, edit Galleries, hide the top-level breadcrumb.

Remove "Galleries" from your menu, replace with "Main".

So your menu will go to main, your breadcrumbs will trace back only so far as main, and the galleries set will be effectively invisible, except to URL peepers. But then it's not the end of the world if they trace their way back. Don't know why they would. Maybe leave an easter egg on the page for fun? =P

In any case, Main would then have a description, and you could even set it up with a thumbnail.

Ben · 2017-12-02 12:32:07

The omission of description for Top-level Galleries is an oversight. We should add it to the Edit Top-level Gallery page, and make it retrievable. I can't commit to when we might do so though.

JimR · 2017-12-02 15:16:55

Matthew wrote:

One thing you can do -- and this maybe isn't ideal, but it would effectively get you what you're wanting -- would be to eliminate the top-level from your exposed site structure. So, make a child set -- we'll call it "Main" for lack of a better name -- like this:
galleries/main

I had thought about this. The downside is it's kinda odd and I wonder about the structure of the site. I can hide all that from the visitor, as you've suggested, but the structure is visible to search engines. I've been doing a lot of work with SEO in the past few years and have found things like structure matter.

The main downside is how I would have to provide redirects. If I move the structure, I'll need to create redirects. I found that redirects are a problem due to the magic (that I don't completely understand) in the htaccess files created by Backlight. I can redirect a directory, but I can't redirect the image files, permalinks, etc. that are in those directories.

I have over a thousand image files. Backlight doesn't have a way to sort albums within a set, and creating a number prefix in the slug was the only way to control this. In my update to the site I realized my old slug names had to be changed.

I was able to create redirects for slugs, but not for any files within those directories. So at the moment I have Google web master tools sending me warnings that my site has hundreds of 404 errors, and that figure keeps growing as the GoogleBot continues to crawl my site.

Back to the point, SEO and the appearance of the Search Engine Results Page (SERP) for my pages is what started me down this rabbit hole. The snippet that appears on the SERP is the <meta name="description" > tag. I'd like to control that. As it is, search engines take a guess at what to show. If you're familiar with the Yoast WordPress Plugin, it has a wonderful feature to write those tags.

The SERP for my main album set, the main page that contains all of my photos, is the title "Photos" with a description that is a concatenation of its album titles and descriptions, truncated to 100 characters (the latest Google SERP API). I'd like to control what is shown in this 100 char limit. Writing the main copy or a description on page can often be picked up as the SERP description, but it's not a certainty. That's pretty good, but then you have to write descriptions that are contained within 100 chars or at least write the first 100 chars as a "good" description.

To sum up, the <meta name="description" > tag is vital to SEO (even more so than permalinks).

Let me think some more about how this might be done with Backlight. I've come to understand the code pretty well, but only enough to be dangerous! I'll followup with a comment on this thread that might help kickoff some ideas on how to get this solved. Ben's comment was something I wouldn't have thought of, but I have a few other ideas. Let me think about this some more and follow up.

Last edited by JimR (2017-12-03 04:00:45)

Community @ The Turning Gate

#1 2017-12-01 00:20:39

meta tags for album sets

#2 2017-12-01 07:27:55

Re: meta tags for album sets

#3 2017-12-01 12:16:10

Re: meta tags for album sets

#4 2017-12-01 16:24:59

Re: meta tags for album sets

#5 2017-12-01 17:22:43

Re: meta tags for album sets

#6 2017-12-01 18:44:00

Re: meta tags for album sets

#7 2017-12-02 04:13:12

Re: meta tags for album sets

#8 2017-12-02 04:21:05

Re: meta tags for album sets

#9 2017-12-02 11:57:36

Re: meta tags for album sets

#10 2017-12-02 12:32:07

Re: meta tags for album sets

#11 2017-12-02 15:16:55

Re: meta tags for album sets

Board footer